Collection tabs
Collection tabs puts a row of icon tabs above a product row. Each tab shows one collection’s products; shoppers switch by tapping a tab.
What it does
Section titled “What it does”Use it to fit several collections in the space of one: “Dogs / Cats / Birds” or “Food / Toys / Beds”. The product row shows the active tab’s collection; a “View all” link follows the active tab to its collection page.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section.
- Click Add section and choose Collection tabs.
- The section is added with five Category tab blocks already in place — All, Dog, Cat, Bird, and Fish, each with its matching icon. Rebind those tabs to your collections instead of adding new ones first (see Set it up: quick start).
- Save.
Choose a style
Section titled “Choose a style”| Setting | Default | Options | What it does |
|---|---|---|---|
| Layout | Drag slider | Grid / Drag slider | Grid wraps products into rows; Drag slider keeps one scrollable row with arrow buttons on desktop |
Set it up: quick start
Section titled “Set it up: quick start”- Add the section and set the Heading.
- Work through the five starting tabs (All / Dog / Cat / Bird / Fish): open each Category tab block, pick its Collection (the “All” tab has no collection picked, which shows all products — keep it as your “Everything” tab or give it a collection), and retype the Label to match. Change the Icon to Collection cover to use the collection’s own photo.
- Remove tabs you don’t need (select the block and Remove block), or add more with Add block → Category tab (up to 8).
- Keep the Drag slider layout for a compact row.
- Save and click each tab in the preview to check its products — not just the first one.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”| Setting | Default | Options | What it does |
|---|---|---|---|
| Heading | “Shop by pet” | Text | Section title; leave empty for no title |
| Number of products to show | 8 | 2–12, step 1 | Products per tab |
| Layout | Drag slider | Grid / Drag slider | Product row arrangement |
| Columns on desktop | 4 | 2–5, step 1 | Visible cards per row. Grid layout (and the phone grid) |
| Product image ratio | Square (1:1) | Square (1:1) / Portrait (4:5) / Portrait (3:4) | Photo shape of every card |
| Card background tint | Cycle through all tints | None (white) / Cream / Lilac / Mint / Apricot / Cycle through all tints | Card color per product |
| Show “View all” link | On | On / Off | Link to the active tab’s collection, after the row |
Blocks
Section titled “Blocks”Add up to 8 Category tab blocks — one per collection.
| Block | Limit | What it adds |
|---|---|---|
| Category tab | 8 | One tab: icon + label + collection of products |
Category tab settings
| Setting | Default | Options | What it does |
|---|---|---|---|
| Icon | Paw | Collection cover / Paw / Dog / Cat / Bird / Fish / Heart / Gift / Bone | The tab’s little picture. Collection cover uses the collection’s own photo |
| Label | Empty | Text | The tab’s name. Defaults to the picked collection’s title when empty |
| Collection | Empty | Collection picker | Products shown when the tab is active. Leave empty to show all products |
Images and content tips
Section titled “Images and content tips”- Tab icons come from the built-in set, or choose Collection cover to show the collection’s photo instead.
- Card photos come from the products; the shared Product image ratio crops them uniformly.
- Products follow the collection’s sort order — arrange the collection itself if sequence matters.
Good to know
Section titled “Good to know”- All tabs’ products are ready before the first tap — switching is instant, nothing loads mid-click.
- Keyboard friendly. Tabs respond to arrow keys, and the row’s arrow buttons scroll the products on desktop; on phones shoppers swipe.
- A tab without a collection shows all products — handy for an “Everything” first tab.
- The “View all” link follows the active tab, always pointing at the collection currently shown.
Example setups
Section titled “Example setups”Species switcher. Four tabs (Dogs / Cats / Birds / Fish) with the matching icons, 8 products each, Drag slider, Cycle tints.
Everything + bestsellers. First tab “All products” with no collection, second tab “Bestsellers” pointing at the bestsellers collection, Grid layout with 4 columns.
Common questions
Section titled “Common questions”Every tab shows the same products. Each tab still points at no collection (or at the same one). Open each Category tab block and pick a different Collection.
A tab’s label is the collection’s full name and wraps. Type a shorter Label in the block — an empty label falls back to the collection title.
The arrows next to the row don’t appear. They show on desktop when the row actually overflows; with few products (or the Grid layout) there is nothing to scroll.