Search and filters — Rep docs

Collection and search pages

The Collection section shows the title, the description and, with Show collection image, the collection's image. Then come the activity pills from your Activity list (chapter 8), and your products in a grid with page numbers. From 990px wide the filters are a sidebar on the left. Under that they're a drawer, opened by the Filter button, with a "Show 29 products" button at the bottom. Above the grid, the toolbar has the number of products and Sort by. Active filters show as removable pills with Clear all. Filtering updates the results without reloading the page.

The Search page has the same activity pills, filters and toolbar, with chips to show All, Products, Pages or Articles. As shoppers type in the search panel, it shows matching products, collections, pages and articles. Chapter 4 lists the Collection and Search settings.

Rep draws each kind of filter its own way: Activity as chips with pictograms, Support level as chips with the three-bar meter, your size option as size pills, your colour option as colour dots with their names, and price as two fields. Other filters are tick boxes.

Filters need the Search & Discovery app

Filters come from Shopify's free Search & Discovery app. Rep shows whatever filters the app provides, on every collection and on search results. Without it, or with no filters added, there are no filters in the sidebar.

Four filters suit an activewear shop best:

Activity, from the custom.activities metafield (chapter 7). The activity tiles and pills link to it.
Support level, from the custom.support_level metafield. The support chips and cards link to it.
Size, from your size option. The fit finder promo's Shop in size M links to it.
Colour, from your colour option.

What the theme shows without them:

Filter missing	What happens
Activity	The activity tiles, the activity pills above collections and the menu drawer's pills open the whole collection, not one activity. Nothing breaks: Shopify quietly ignores a filter it doesn't have. Give each tile its own Link as a fallback (chapter 8).
Support level	The support chips and support cards open the whole collection (or the one you chose for them). Give the cards their own Link, and choose a sports bra collection for the chips (chapter 8).
Size	Shop in size M opens the whole collection. The fit finder itself works without it.
Colour	No colour dots in the sidebar. Swatches on cards and product pages don't need it.

To add the filters:

Create the custom.activities and custom.support_level definitions and fill them in on your products (chapter 7).
In admin, go to Apps and open Search & Discovery. If you haven't got it, install it from the Shopify App Store.
Click Filters, then Add filter.
Choose your Activities product metafield as the Source, label it "Activity" and click Save.
Click Add filter again, choose your Support level product metafield, label it "Support level" (or "Support") and Save.
Click Add filter again, choose your Size option and Save.
Click Add filter again, choose your colour option (Colour or Color, whichever your products use) and Save.

Check Enable filtering is on in the Collection section, which it is by default. If a value doesn't appear after you've changed your products, allow some time for Shopify to index it; a small edit and save on the product can hurry it along.

The links use the metafield's key and the option's name, not the filter label, so you can label the filters however you like.

Shopify's limits:

A store can have up to 25 filters.
A filter shows up to 100 values on your store.
Collections with more than 5,000 products don't display filters.
A metafield filter works on these types: Single line text, Single line text (List), Decimal, Integer, True or false, and Metaobject reference (one or a list). So custom.activities and custom.support_level work as filters.

The filter lists each spelling separately, so if some products say "Yoga" and others "yoga", it offers both: pick one spelling. Other good filters for an activewear shop: Availability, Price, Product type, and custom.fit_type or custom.compression if your shoppers ask for them. The same app sets the complementary products for Product recommendations (chapter 4).

Links to an activity, a support level or a size

With the filters on, you can link straight to them from a menu, a button or a promo:

/collections/all?filter.p.m.custom.activities=Pilates
/collections/sports-bras?filter.p.m.custom.support_level=High
/collections/leggings?filter.v.option.size=M