Collections & filtering

Department 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 department 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 & Disproduct imagey](https://apps.shopify.com/search-and-disproduct imagey) app.

Install it, then under Search & Disproduct imagey → Filters add the filters you want. For an electronics store 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/laptops?filter.v.option.finish=Graphite
/collections/all?filter.p.vendor=Kestrel

Search

Predictive search matches product titles, vendors (brands), 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 product image, the title, the brand and the price, which is usually enough to pick from without opening anything.