Product showcase
Product showcase shows products from collections, one tab per collection, as a scrolling rail or a grid.
How to set it up
Step 1: Add the Product showcase section
- In the theme editor, open the page you want and click Add section under Template.
- Search for Product showcase and select it (1).
Step 2: Set up the layout
- Pick Layout (1): scrolling rail or grid, the products per tab, columns and the progress line.
Step 3: Add tabs
- Add Collection tab blocks: a collection, an optional tab label and a View all button.
Settings reference
Product showcase
| Products | |
|---|---|
| Layout | Options: Scrolling rail, Grid. |
| Progress line | Options: Desktop and mobile, Desktop only, Mobile only, Off. |
| Products per tab | Slider. |
| Columns | Slider. |
| Mobile columns | The rail shows part of the next card on mobile. Options: 1, 2. |
Collection tab block
| Collection | A collection. |
|---|---|
| Tab label | Defaults to the collection title. |
| Show "View all" button | Turns this on or off. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- With one tab, the tab bar is hidden.
- On mobile the rail shows part of the next card.