Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Product tabs. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Add a Collection tab block for each product group and select its Collection.
- Write a short Tab label that distinguishes the group.
- Set Products per tab, product columns and gaps; review the actual collection contents and order in Shopify.
- Choose Underline or Pills, tab alignment and a meaningful accessibility label.
- Configure the View all button where useful and preview switching between every tab.
Main settings to review
| Setting | Choices or control |
|---|---|
| Products per tab | 2–16; step 1 |
| Show view all button | On / Off |
| Style | Underline · Pills |
| Alignment | Left · Center · Right |
| Products on mobile | 1 · 2 |
Blocks and content
This section allows up to 8 direct blocks. Nested blocks have their own parent-specific choices and limits.
- Collection tab: configure this inside the section. Its available controls are listed below.
Content and media
- Products and card media come from the selected collections. Keep consistent image shapes across groups for a stable presentation.
Check the mobile layout
- Keep tab labels concise and check access to the final tab. Review the product columns and all product links at phone width.
Common questions and fixes
- A tab is empty: select its Collection and check that the collection contains published products.
- A product appears in more than one tab: check membership in the selected collections.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (24)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Content / Heading | Text | Default: Shop our favorites. |
| Content / Subheading | Multiline text | Default: Browse products by collection.. |
| Content / Products per tab | 2–16; step 1 | Default: 8. |
| Content / Show view all button | On / Off | Default: On. |
| Content / View all button label | Text | Default: View all. This control appears only when the relevant layout or related option is selected. |
| Tabs / Style | Underline · Pills | Default: Underline. |
| Tabs / Alignment | Left · Center · Right | Default: Center. |
| Tabs / Accessibility label | Text | Default: Product collections. |
| Media / Section background image | Choose an image | Default: Not set. |
| Media / Section background position | Image focal point · Top · Center · Bottom | Default: Image focal point. This control appears only when the relevant layout or related option is selected. |
| Media / Section background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Media / Section background overlay | 0–80 %; step 5 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Products / Products on desktop | 2 · 3 · 4 · 5 · 6 | Default: 4. |
| Products / Products on tablet | 1 · 2 · 3 · 4 | Default: 3. |
| Products / Products on mobile | 1 · 2 | Default: 2. |
| Products / Desktop gap | 0–48 px; step 4 | Default: 24. |
| Products / Mobile gap | 0–32 px; step 4 | Default: 16. |
| Section / Color scheme | Choose a color scheme | Default: background. |
| Section / Section spacing | Compact · Standard · Generous | Default: Standard. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |
Collection tab block controls (2)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Tab label | Text | Default: Not set. Uses the collection title when left blank. |
| Collection | Choose a collection | Default: Not set. |