Collection tabs

Collection tabs puts up to four collections behind tabs in one section, for example New in, Best sellers and Sale. Each tab shows a grid of that collection’s products, so a shopper can switch between them without leaving the page.

It can’t be placed in the header or footer groups.

Settings

• Heading. Default: Shop by collection.

Product cards

• Image ratio. Adapt to image, Portrait (3:4), Square (1:1) (default) or Landscape (4:3).
• Show vendor. Default: off.
• Show second image on hover. Default: on.
• Color scheme. Default: scheme-1.

The rest of the card, such as quick add, swatches and badges, follows Product cards in theme settings.

Spacing

• Top padding / Bottom padding. Range: 0 to 300 px in 5 px steps. Default: 60 px each.

Blocks

Up to four Collection tab blocks. The section starts with three, labeled New in, Best sellers and Sale, waiting for their collections.

• Collection. The collection this tab shows. Until one is chosen, the tab shows placeholder cards.
• Tab label. Leave empty to use the collection’s title.
• Products. How many of the collection’s products the tab shows. Range: 1 to 8. Default: 4.
• Columns on desktop. Range: 2 to 4. Default: 4.
• Show “View all” link. A link to the full collection under the grid. Default: on.

How the tabs behave

• With two or more tabs, shoppers switch between them with a click, or with the arrow keys once a tab has focus.
• With a single tab there is nothing to switch, so the section shows that collection’s heading and grid without a tab row.
• With no tabs the section shows nothing on your storefront, and a reminder to add one in the theme editor.

Tips

• Keep tab labels to one or two words. They sit side by side on a phone, and long labels push the last tab out of view.
• Match the product count to the columns. Four products in four columns, or eight in four, fills whole rows. Six in four leaves a gap.
• Give each tab a different job. New, best-selling and on-sale products answer different questions. Three tabs of similar collections look like one collection split in three.