> 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-pro/sections-and-features/collection.md).

# Collection

Renders the collection page with two layouts shoppers can switch between — a vertical Feed and a multi-column Grid. Includes filtering and sorting.

## How to access

In the customizer, open a collection template and edit the **DRIFT Collection Feed** section.

## View settings

### Default view

Which layout loads first — **Feed** or **Grid**.

### Allow view toggle

Show a feed/grid toggle icon in the header on collection pages.

## Filter & Sort

### Enable filtering

Show a filter button on collection pages. Available filters are configured in **Shopify Admin → Online Store → Navigation**.

### Enable sorting

Show a sort button on collection pages.

## Feed settings

### Image ratio

Choose **1:1 (Square)** or **3:4 (Portrait)**. Applies to both Feed and Grid views.

### Products to show

Range from 4 to 50. The maximum number of products displayed.

### Show product title

Display product title in both Feed and Grid views.

### Show product price

Display product price in both views.

### Hover effect

Choose **None**, **Grow**, or **Glow**. Applied to products in both views.

### Feed indicator

Choose **None**, **Dots**, or **Numbers**. The progress indicator shown in Feed view.

## Grid settings

### Grid columns (desktop)

Choose **3 columns** or **4 columns**. Mobile is always 2 columns.

### 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.