> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/drift-shopify-theme/drift-studio/sections-and-features/collection.md).

# Collection

The main collection page layout — feed and grid views, filters, sorting, and pagination.

The Collection Feed (named "DRIFT Collection Feed" in the section picker) is DRIFT's collection page layout. It's the page customers see when they click a collection from your menu (e.g., "Shop All", "New Arrivals", "Sale").

Like the [Product Feed](/drift-shopify-theme/drift-studio/sections-and-features/feed.md), it supports both a swipe-style feed view AND a traditional grid view, with an optional shopper-facing toggle in the header to switch between them.

## Layout

* **Top**: Collection title, description, optional banner image
* **Body**: Product grid with adjustable columns
* **Sidebar (desktop)**: Filters and sorting (Pro and Studio)
* **Bottom**: Pagination (load more or numbered pages)

## Settings

Open the theme editor → navigate to a collection page → click the Collection section.

### Layout

* **Products per row (desktop)** — 2, 3, or 4 columns
* **Products per row (mobile)** — 1 or 2 columns
* **Card style** — image-only, image with title, image with title + price
* **Image ratio** — square (1:1) or portrait (3:4)
* **Hover effect** — `None`, `Grow` (subtle scale-up), `Glow` (soft outline), or `Image swap` (cross-fades to the product's 2nd image). Image swap requires a 2nd product image and is skipped for sold-out products. Desktop only

### Filters and sorting (Pro and Studio)

* **Filters enabled** — toggle filters on/off. Filters render in a sidebar on desktop and a slide-out panel on mobile
* **Available filters** — based on your product properties. Shopify supports filtering by:
  * Availability (in stock / out of stock)
  * Price range
  * Product type
  * Vendor
  * Tag
  * Variant options (color, size, etc.)
* **Sort options** — featured, best-selling, price (low/high), date added, alphabetical

To customize which filters show, go to **Online Store** → **Navigation** → **Collection filters**.

### Quick-add (Studio only)

When a customer hovers over a product card, a small "+" button appears in the corner. Clicking it opens the quick-add overlay where they can pick a size and add to cart without leaving the collection page.

* **Quick-add enabled** — toggle on/off

See the [Product Feed](/drift-shopify-theme/drift-studio/sections-and-features/feed.md) page for how quick-add behaves on product cards.

### Pagination

* **Pagination style** — load more button or numbered pages
* **Products per page** — how many products per "page" of pagination

### Swiping through a product's images (mobile)

Hover reveals a second image on desktop, but touch has no hover — so on mobile the images become swipeable instead.

* **Swipe up/down** — moves between products, as before
* **Swipe left/right** — moves through that product's images, up to four

The two gestures are handled by the browser on separate axes, so neither interferes with the other, and it works the same way as the product page's mobile gallery — shoppers only learn the gesture once.

Whichever image is nearest the centre is full size and sharp; its neighbours scale down, blur and fade, matching the treatment products get in the vertical feed.

Nothing to configure. Any product with more than one image gets it automatically, and images past the first are lazy-loaded so a feed full of products doesn't pay for images nobody swipes to. A product scrolled away from returns to its first image.

## Tips

* **3 columns desktop, 2 columns mobile** — most flattering for product imagery in fashion/apparel. 4 columns can feel cramped on smaller laptops
* **Use square images for streetwear / casual brands**, **portrait (3:4) for elevated apparel**
* **Filters matter for big stores** — if you have 100+ products in a collection, filters dramatically improve UX. If you have <30, filters can feel overkill
* **Keep collection descriptions short** — they take up vertical space above the products. Save the brand storytelling for an About page
* **Test load times** — if your collection has 200+ products, pagination matters. Loading all 200 images at once kills mobile performance