Collection tabs
Where you can add it
Not in section groups: Header, Footer, Overlays.
Blocks
Section titled “Blocks”- Tab — part of this section
Up to 6 blocks.
Tab
| Setting | Type | Default | Options and range |
|---|---|---|---|
| Collection | Collection | — | |
| Label Shown on the tab. Leave blank to use the collection’s title. | Text | — | |
| Link text The link to the collection under the tab. Leave blank for “Shop all” and the tab’s name. | Text | — |
Settings
Section titled “Settings”| Setting | Type | Default | Options and range |
|---|---|---|---|
| One tab per collection, up to six. A tab without a collection, or whose collection has no products, isn’t shown to shoppers. | |||
| Heading Make a word italic to emphasize it. | Inline rich text | Shop by collection | |
| Heading size Shown when Heading is set and Tab style is not Editorial. | Select | Medium | |
| Highlight color Leave empty to use the color scheme’s highlight. Shown when Heading is set or Tab style is Editorial. | Color | — | |
| Tab style Editorial makes the tabs the headline: the heading becomes a small line above them. | Select | Chips | |
| Show product count Shown when Tab style is Editorial. | Checkbox | On | |
| Products to show | Range | 8 | 4–12, step 1 |
| Show a link to the collection | Checkbox | On | |
| Arrangement | |||
| Layout on desktop Each breakpoint is chosen separately, so a grid on desktop can be a carousel on a phone — or stay a grid. | Select | Grid | |
| Layout on tablet | Select | Carousel | |
| Layout on mobile | Select | Carousel | |
| Columns on desktop Shown when Layout on desktop is not Stack. | Range | 4 | 3–6, step 1 |
| Columns on tablet Shown when Layout on tablet is not Stack. | Range | 2 | 1–4, step 1 |
| Columns on mobile Shown when Layout on mobile is not Stack. | Select | 1 | |
| Space between products | Range | 20 px | 8–48 px, step 2 |
| Pagination Shown when Layout on desktop is Carousel or Layout on tablet is Carousel or Layout on mobile is Carousel. | Select | None | |
| Show arrows Shown when Layout on desktop is Carousel or Layout on tablet is Carousel or Layout on mobile is Carousel. | Checkbox | On | |
| Text on glass Auto picks dark or light text for each glass element from the brightness of the photo behind it. Shown when Show arrows is on. | Select | Auto | |
| Product card | |||
| Image ratio | Select | Portrait | |
| Show the image gallery on hover On hover the card moves through the product’s images, as set in Theme settings › Product card › Image on hover. Touch screens show the first image. | Checkbox | On | |
| Show vendor | Checkbox | Off | |
| Show color swatches | Checkbox | On | |
| Show quick add | Checkbox | On | |
Settings every section has — Layout, spacing, motion and visibility — the same in every section. Defaults here: Section width Full width (everywhere else: Page width); Top spacing 104 px (everywhere else: 64 px); Bottom spacing 104 px (everywhere else: 64 px); Top spacing on mobile 56 px (everywhere else: 40 px); Bottom spacing on mobile 56 px (everywhere else: 40 px); Stagger 80 ms (everywhere else: 0 ms). | |||
Presets
Section titled “Presets”- Collection tabs — Category: Collections
Starts with: Tab, Tab, Tab, Tab