Appearance
Tabs Block (Product Page)
The Tabs block puts up to five content panels into the product page buy box, for example Description · How to use · Ingredients · Shipping. Only one panel is open at a time, so a lot of information fits into little space.
Switching tabs is animated: the highlighted tab background and its underline slide over to the selected tab, the content slides in from the side, and the panel smoothly grows or shrinks to the height of the new content instead of jumping. Visitors who have reduced motion enabled in their system settings get the change without animation. On desktop all tabs share the width of the row equally. On phones, if the tab titles do not fit, the tab row scrolls sideways and the selected tab moves into view automatically.
The block is available in both product sections, Product Information and Product block. One block per section.
This article covers the Tabs block inside the product sections. For the standalone Tab Content section that you add to any page, see the Tab Content Section article.
Adding The Block
- Open the theme editor and navigate to a product page.
- In the Product Information section (or the Product block section), click "Add block".
- Choose Tabs.
- Enter a title and content for each tab you want to show.
Settings
Tabs 1–5
- Tab title 1–5: the label on the tab. A tab only appears when its title is filled in. Leave the title empty to hide that tab. Tabs 1–3 come with example titles, tabs 4 and 5 are empty.
- Tab content 1–5: rich text shown in the panel.
- Tab page content 1–5 (Product Information section only): pick a shop page instead of typing the content. When the page has content, it replaces the rich text of that tab. This is useful for text that is the same on many products, such as shipping or care information: change the page once and every product shows the new version.
Title font size
Title size (desktop) and Title size (mobile): the size of the tab labels.
Description font size
Description size (desktop) and Description size (mobile): the size of the panel text.
Colors
| Setting | What it colors | Default |
|---|---|---|
| Active tab background | the sliding background behind the selected tab | #f3ede4 |
| Active tab text | label of the selected tab | #222222 |
| Inactive tab text | labels of the other tabs | #8f8f8f |
| Active underline | the sliding line under the selected tab | #8b5a2b |
| Content background | the panel behind the content | #ffffff |
| Content text | the panel text | #3d3d3d |
| Border | the frame around the panel | #e6e0d8 |
Border
- Border width: 0–8px. Set it to 0 for a panel without a frame.
- Corner radius: 0–32px.
- Active underline thickness: 0–8px. Set it to 0 to hide the sliding underline and mark the active tab only with its background and text color.
Block margin
Margin bottom (desktop) and Margin bottom (mobile), 0–100px.
Tips
- Keep the tab titles short, ideally one or two words. The shorter they are, the more tabs fit on a phone screen before the row has to scroll.
- Put the most important information in the first tab. It is the one that is open when the page loads.
- Make sure Inactive tab text still has enough contrast against the page background. Pale grey labels can be hard to read, and visitors may not notice that there are more tabs.
- Use a page for shared content (shipping, returns, care) and the rich text field for product-specific content.