Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Tabs. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Add a Tab block for each topic and enter a short Tab label.
- Inside each Tab, add the Heading, Rich text, Image, Button or other supported content that belongs to it.
- Choose Underline or Pills, alignment and the gap between tabs.
- Set the panel style, width, corner radius and desktop/mobile padding.
- Switch through every tab by pointer and keyboard and check that all panels have useful content.
Main settings to review
| Setting | Choices or control |
|---|---|
| Style | Underline · Pills |
| Alignment | Left · Center · Right |
| Style | Plain · Bordered · Surface |
| Content width | 30–100 %; step 5 |
| Mobile padding | 0–64 px; step 4 |
Blocks and content
This section allows up to 8 direct blocks. Nested blocks have their own parent-specific choices and limits.
The following content blocks have their own setup and control reference. Nested blocks belong inside their parent, such as Slide, Tab, Tile or Story chapter.
Content and media
- Any images or videos belong to blocks inside the tab. Keep essential information in readable content rather than an image of text.
Check the mobile layout
- Check the tab-label row and panel padding at phone width. Long labels should remain understandable and every tab reachable.
Common questions and fixes
- A tab opens an empty panel: add child content inside that Tab.
- You want automatically populated collection products: use Product tabs instead.
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 (26)
| 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. |
| Heading / Text above heading | Text | Default: Not set. |
| Heading / Heading | Text | Default: Discover the details. |
| Heading / Text | Formatted text | Default: Organize related information into clear, easy-to-browse tabs.. |
| Heading / Heading alignment | Left · Center · Right | Default: Left. |
| Heading / Content width | 30–100 %; step 5 | Default: 100. Percentage of page width on desktop. Mobile uses 100%. |
| Tabs / Style | Underline · Pills | Default: Underline. |
| Tabs / Alignment | Left · Center · Right | Default: Left. |
| Tabs / Gap between tabs | 0–40 px; step 2 | Default: 24. |
| Tabs / Accessibility label | Text | Default: Content tabs. |
| Panel / Style | Plain · Bordered · Surface | Default: Bordered. |
| Panel / Corner radius | 0–48 px; step 2 | Default: 8. This control appears only when the relevant layout or related option is selected. |
| Panel / Desktop padding | 0–96 px; step 4 | Default: 32. This control appears only when the relevant layout or related option is selected. |
| Panel / Mobile padding | 0–64 px; step 4 | Default: 20. This control appears only when the relevant layout or related option is selected. |
| Panel / Content gap | 0–48 px; step 4 | Default: 16. Space between content blocks inside each Tab. |
| Section / Color scheme | Choose a color scheme | Default: background. |
| Section / Top padding | 0–160 px; step 4 | Default: 48. |
| Section / Bottom padding | 0–160 px; step 4 | Default: 48. |
| 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. |
| 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. |