Set up collection filters

Reel’s collection pages filter by colour, size, price, availability and any other filter you set up. Filters update the page in place and the address in the browser, so a filtered page can be shared or bookmarked. You choose which filters exist in Shopify’s free Search & Discovery app. Reel decides how they look.

1. Choose your filters in Search & Discovery

1. Install the Search & Discovery app from the Shopify App Store if you don’t have it.
2. In the app, open Filters and click Add filter.
3. Add the filters your shoppers need. A good start for clothing is Availability, Price, and the product options Color and Size.
4. Drag the filters into the order you want and save.

The first three filters open by default. Any filter a shopper has used stays open too.

2. Turn filtering on in the theme

1. Go to Online Store → Themes → Customize.
2. In the page menu at the top, choose Collections → Default collection.
3. Click the Collection section.
4. Make sure Enable filtering and sorting is ticked. Sorting lives in the same panel, so turning this off removes both.
5. Pick a Filter layout on desktop: Sidebar keeps the filters in a column beside the products. Drawer hides them behind a Filter button.

On phones and tablets, filters always open in a drawer from the Filter button. The button shows how many filters are active.

3. How each filter looks

• Colour filters show as swatches when the filter’s name matches one of the names in Theme settings → Swatches → Option names shown as swatches, or when Search & Discovery sends the filter as swatches. The swatch colours come from the same places as on the product page. See Choose a preset, fonts and colours.
• Short values, such as sizes, show as a grid of buttons when there are more than four of them.
• Price shows two boxes: From and To.
• Everything else shows as a list of checkboxes with a count beside each value. Values with no matching products are greyed out.

Active filters appear above the products as tags. Shoppers remove one by clicking its tag, or all of them with Clear all.

4. Grid options

In the same Collection section:

• Products per page: 12 to 48.
• Columns on desktop: 2 to 5. Phones show two columns, and tablets show up to three.
• Show collection description shows the collection’s description beside the title.
• Letters gather into the title animates the collection title once when the page opens. It runs only when Theme settings → Motion is set to Full, and never for shoppers who ask for reduced motion.

How each product card looks is set for the whole store in Theme settings → Product cards:

• Image shape: Portrait 4:5, Tall 2:3, Square or Natural.
• Show second image on hover.
• Show color swatches: up to five swatches under the card, then a count of the rest.
• Show vendor.
• Enable quick add: a plus button that opens quick add.