Collections & filtering

Genre tabs on the homepage

The tabbed-collections section renders one tab per collection. Add the section in the theme editor, then add a block per genre and pick its collection.

Every panel is rendered with the page, not fetched when a tab is clicked. That means:

• switching tabs costs no request and is instant
• the grid works with JavaScript disabled
• all the products in all the tabs are in the HTML, so search engines see them

The cost is page weight, so four to six tabs of four products each is the sensible ceiling. The section has a products per tab setting for exactly that reason.

Keyboard support is the full ARIA tabs pattern: arrow keys move between tabs, Home and End jump to the ends, and only the active tab is in the tab order.

Collection pages

A collection page is the main-collection section plus whatever blocks you add around it. Filtering and sorting come from Shopify's free first-party Search & Discovery app.

Install it, then under Search & Discovery → Filters add the filters you want. For a bookshop these usually are:

The theme renders whatever you enable there. It does not define the filter list itself, which is why adding a filter needs no theme change.

Without the app the collection pages still render and sort; they just do not filter.

Deep links

Collection URLs accept Shopify's standard filter parameters, so you can link straight to a filtered view from a menu or a campaign:

/collections/fiction?filter.v.option.format=Paperback
/collections/all?filter.p.vendor=Marin+Okonkwo

Search

Predictive search matches product titles, vendors (authors), types and tags, plus collections, articles and pages. It is Shopify's own search — the theme renders the results, it does not index anything.

The results show the cover, the title, the author and the price, which is usually enough to pick from without opening anything.