Tabs
Content in tabs, each with an image, a heading, text and a button – as an underlined row, pills or a list on the side. Good for a routine step by step, materials or how an order works.
- In the editor
- Tabs
- Where it goes
- Any page template, with Add section
- In the presets
- Petal: Home page
- Settings
- 18
- Blocks
- Tab
- App blocks
- Yes
Set it up
- Add a Tab block for each tab and write its Tab label, with an optional Icon.
- Fill the tab: Image, Heading, Text and a Button.
- Or pick a Page in Page content to show the text of a page from Online Store > Pages – handy for delivery or care information you keep in one place.
Options
- Tab style: an Underlined row, Pills, or a List on the side for longer labels.
- Heading and tabs alignment: left or center.
- Image position on desktop: left or right; Image ratio: landscape, square or portrait.
- Show placeholders for missing images keeps the layout while photos are on their way.
- Tab heading size: the size of the heading inside each tab.
Tabs are keyboard friendly: shoppers move between them with the arrow keys. The Petal preset uses tabs for its routine on the home page.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Tabs18 settings
| Setting | Options | Default |
|---|---|---|
| Heading | Rich text (one line) | Sample text |
| Text | Rich text | – |
| Heading size | Large · Medium · Small | Medium |
| Heading and tabs alignment | Left · Center | Left |
| Tab style | Underlined row · Pills · List on the side | Underlined row |
| Image position on desktop | Left · Right | Right |
| Image ratio | Landscape · Square · Portrait | Landscape |
| Show placeholders for missing images | Checkbox | On |
| Tab heading size | Medium · Small · Extra small | Small |
| Color scheme | Color scheme | Scheme 1 |
| Section spacing | ||
| Top padding | 0–160px | 72px |
| Bottom padding | 0–160px | 72px |
| Top padding on mobile | 0–120px | 48px |
| Bottom padding on mobile | 0–120px | 48px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | On |
| Anchor IDLink to this section with #anchor-id. | Text | – |
Block settings
Block: Tab9 settings
| Setting | Options | Default |
|---|---|---|
| Tab label | Text | Sample text |
| Icon | None · Truck · Return · Shield · Card · Chat · Gift · Tag · Box · Leaf · Clock · Star · Heart · Pin · Phone · Email · Sparkle · Globe | None |
| Image | Image | – |
| Heading | Rich text (one line) | Sample text |
| Text | Rich text | Sample text |
| Page content | Page | – |
| Button label | Text | – |
| Button link | Link | – |
| Button style | Primary · Secondary | Secondary |
Related
TimelineSteps along a line – your story, how a product is made, or what happens after an order – in four layouts.FAQQuestions that open one at a time, with a heading and a contact button beside them, and structured data for search engines.Image with textA photo beside text built from blocks – label, heading, text, list, stats and buttons – plain or on an overlapping card.