Tabbed products

Several collections behind tabs, so a visitor can switch between them without leaving the page.

Setting it up

Add a Tab block per collection. Each takes a Tab label and a Collection.

Products per tab and Columns on desktop apply to every tab, so they all share a layout.

Choosing the tabs

Three or four tabs is the useful range. The value of this section is letting someone compare a couple of routes at a glance; past four the labels shrink and it becomes a menu rather than a comparison.

Pick tabs that a customer would genuinely choose between — New in, Best sellers, On sale — rather than your full category tree, which belongs in the navigation.

Put the tab most visitors want first. It is the one that shows before anyone clicks.

Settings

Section settings

Content

Setting	Type	Default	Notes
Heading	Text	Popular products	—

Products

Setting	Type	Default	Notes
Products per tab	Slider (4–12)	8	—
Columns on desktop	Dropdown	4	Options: 3, 4, 5

Background

Setting	Type	Default	Notes
Background	Color	—	—

Padding

Setting	Type	Default	Notes
Padding top	Number	—	Adjust the top padding for this section. If left empty, the global section padding will be used by default.
Padding bottom	Number	70	Adjust the bottom padding for this section. If left empty, the global section padding will be used by default.

Blocks

Tab

Setting	Type	Default	Notes
Tab label	Text	—	Leave blank to use the collection title.
Collection	Collection	—	—