Tabs Block Builder is a Shopify theme section in the Section Star library. Create amazing tabs using theme and app blocks.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Section Design
Set the design for the section
| Setting | Type | Default |
|---|---|---|
| Show Section | Select (All Devices, Mobile Only, Desktop Only) | all |
| Background Color | Color or gradient | linear-gradient(127deg, rgba(241, 246… |
| Background Image | Image | — |
| Background Image Color | Color | — |
| Background Image Size | Select (Auto, Cover, Contain) | cover |
| Mobile Background Image | Image | — |
| Mobile Background Image Color | Color | — |
| Mobile Background Image Size | Select (Auto, Cover, Contain) | cover |
| Padding Top/Bottom | Number | 25 |
| Mobile Padding Top/Bottom | Number | 25 |
| Padding Left/Right | Number | 25 |
| Mobile Padding Left/Right | Number | 25 |
| Custom CSS Class | Text | — |
Container Design
Set the design for your inner container
| Setting | Type | Default |
|---|---|---|
| Background Color | Color or gradient | — |
| Max Width | Number | 1000 |
| Padding Top/Bottom | Number | 10 |
| Mobile Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 10 |
| Mobile Padding Left/Right | Number | 10 |
| Round Borders on Container | Range | 0 |
| Subtle Shadow on Container | Checkbox | Off |
| Border Size on Container | Range | 0 |
| Border Color on Container | Color | #888 |
Grid Design
Set the design for the grid
| Setting | Type | Default |
|---|---|---|
| Gap Between Columns | Number | 20 |
| Gap Between Blocks | Number | 10 |
| Vertical Alignment | Select (Center, Top, Bottom) | start |
Tab Display
Set the display for the tabs
| Setting | Type | Default |
|---|---|---|
| Text Size | Range | 15 |
| Mobile Text Size | Range | 15 |
| Tab Active Color | Color | #111 |
| Tab Inactive Color | Color | #888 |
| Tab Border Color | Color | #ddd |
| Tab Icon Size | Number | 20 |
| Tab Icon Spacing | Number | 5 |
| Active Tab Border Height | Number | 6 |
| Mobile Active Tab Border Height | Number | 6 |
| Tab Alignment | Text alignment | left |
| Tab Mobile Display | Select (Stacked, Side-by-Side) | stacked |
| All open on mobile? | Checkbox | Off |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Tabs Block Builder”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.