Collection filter tabs

Overview

Collection filter tabs are optional pill buttons that appear above the product grid on a collection page. Shoppers tap a tab to see only products in that group, or tap All to see every product in the collection again.

Tabs scroll horizontally on smaller screens (with prev/next controls when needed). They work alongside the collection’s normal sidebar or mobile filter sheet — tabs are for merchant-defined groups you control with product tags, not for Shopify’s automatic filters (price, availability, and so on).

Tabs appear only when at least one product in that collection uses a qualifying tag (see below). If no products have those tags, the tab row is hidden.

Quick rules

1. Add a product tag that starts with mf_tabs_.
2. The rest of the tag becomes the tab label (see How tab labels are formed).
3. The product must belong to the collection you are viewing. Tags on products that are not in that collection do not create tabs on that page.

Examples from the theme editor hint:

• mf_tabs_golden → tab label Golden
• mf_tabs_stone → tab label Stone

Where to configure

Theme editor (turn tabs on)

1. Open Online Store → Customize.
2. Navigate to a collection page (for example All products or a collection you sell from).
3. In the left sidebar, select the Collection section (the main product grid for that template).
4. Under Filter tabs, enable Enable filter tabs.
5. Optionally adjust Button size, Active tab variant, Inactive tab variant, and Rounded full / Rounded to match your brand.

Filter tabs do not replace Products per page or pagination — they only narrow which products appear on the current collection URL.

Shopify admin (tags and collections)

1. Products → open a product (or bulk-edit several).
2. In Organization (or Tags), add tags using the mf_tabs_ prefix (see examples below).
3. Products → Collections — open the collection where shoppers should see the tabs.
4. Confirm each tagged product is included in that collection (manual collection membership, automated conditions, or both).

Step-by-step setup

1. In the theme editor, enable Enable filter tabs on the Collection section for your collection template.
2. Decide your tab groups (for example Golden, Stone, Sale).
3. For each group, choose one tag per tab, always starting with mf_tabs_.
4. Add those tags to the relevant products in Shopify admin.
5. Make sure those products are in the collection you are customizing.
6. Save the product and collection changes, then preview the collection on the storefront.
7. Confirm each tab appears and shows the expected products; use All to return to the full collection.

How tab labels are formed

The theme reads the tag, removes mf_tabs_, replaces underscores with spaces, and capitalizes the first letter of the result.

Use lowercase words in the tag after the prefix; avoid extra spaces in the tag itself. Only letters, numbers, and underscores are practical in Shopify tags.

How filtering works

• All — Opens the main collection URL and shows every product in that collection (respecting your sort order).
• A named tab — Opens the collection filtered to that tag (Shopify’s standard tagged collection URL). Only products that have both the tag and membership in the collection appear.
• Sort order — If the shopper already chose a sort option, changing tabs keeps that sort when possible.
• Page load — Each tab click loads a new page (this is normal Shopify collection filtering, not an instant in-page filter).

The first tab is always All. Other tabs are listed in the order Shopify provides for tags on that collection.

Examples

Example 1 — Jewelry: Golden and Stone

Goal: On the Rings collection, let shoppers switch between golden-tone and stone-tone pieces.

1. Enable filter tabs on the Collection section for the collection template.
2. Tag products:
   • Gold-tone rings: mf_tabs_golden
   • Stone-forward rings: mf_tabs_stone
3. Ensure all those products are in the Rings collection.

Storefront: Tabs All, Golden, and Stone. Choosing Golden shows only products tagged mf_tabs_golden in that collection.

Example 2 — Apparel: New arrivals and Sale

Goal: Highlight new items and sale items on All products or a seasonal collection.

1. Enable filter tabs on the collection section.
2. Tag products:
   • mf_tabs_new_arrivals on this season’s SKUs
   • mf_tabs_sale on discounted SKUs (a product can have both tags if it is new and on sale)
3. Add products to the collection shoppers will open.

Storefront: Tabs All, New arrivals, and Sale. A product with both tags appears when either matching tab is selected.

Example 3 — One product in two tab groups

Goal: A single necklace is both “Best sellers” and “Gift ideas.”

1. On that product, add two tags: mf_tabs_best_sellers and mf_tabs_gift_ideas.
2. Keep the product in the target collection.

Storefront: Both Best sellers and Gift ideas tabs appear (if other products use those tags too). The necklace shows when either tab is active.

Example 4 — Tab does not appear

Goal: You added golden (without the prefix) expecting a Golden tab.

Result: No tab — the tag must be mf_tabs_golden, not golden. Fix the tag in admin and save the product.

Troubleshooting

Related

• Collection section — filter tab settings, grid, pagination, and filters
• Collection banner — hero content above the grid (separate from tabs)