# Tabs Builder

> Create complex tabs with images, icons, columns and more.

URL: https://sectionstar.app/sections/tabs-premium/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.893Z

---

**Tabs Builder** is a Shopify theme section in the Section Star library. Create complex tabs with images, icons, columns and more.

## About the Tabs Builder section

The "Tabs Premium" section for Shopify e-commerce stores allows you to create a visually appealing and highly functional tabbed interface within your website. Utilizing the Section Star app, this section gives you incredible flexibility to display a variety of content in a clean and organized way. Whether you're highlighting features, displaying different product categories, or sharing important information, the Tabs Premium section helps you engage users effectively with customizable tabs and content areas.

## Live demo

## Use cases

1. **Product Categories**: Use tabs to categorize different types of products, like clothing, electronics, accessories, etc. Each tab can host a range of products within that category.
2. **Feature Highlights**: Showcase various features or aspects of a single product. Each tab could provide detailed information about specifications, reviews, and pricing.
3. **Customer Support**: Provide segmented information about shipping, returns, and support policies, giving customers quick access to important information.
4. **Educational Content**: Share tutorials or guides related to your products. Each tab can serve as a chapter or section of your guide, offering a neat and organized reading experience.
5. **Promotions and Deals**: Announce special promotions and deals in a dedicated tabbed area, each tab specifying a different promotional event or offer.

## Settings

Every setting below appears in the Shopify theme customizer once the section is published.

### Grid Design
Set the design for the grid

| Setting | Type | Default |
| --- | --- | --- |
| Gap Between Columns | Number | 20 |
| Gap Between Content Elements | Number | 20 |

### Media Design
Set the design for media

| Setting | Type | Default |
| --- | --- | --- |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |

### Tab Design
Set the design of 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 |

### Headline
Set text for the headline

| Setting | Type | Default |
| --- | --- | --- |
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |

### Tab block settings

| Setting | Type | Default |
| --- | --- | --- |
| Tab Name | Text | New Tab |
| Tab Icon | Select (No Icon, Uploaded Image, Cart, Gift, Gift Card, Shipping…) | tag |
| Image | Image | — |
| Min Height of Tab | Number | — |
| Vertical Alignment | Select (Center, Top, Bottom) | start |
| Background Color | Color or gradient | — |
| Padding Top | Number | 20 |
| Padding Bottom | Number | 20 |
| Padding Left | Number | 0 |
| Padding Right | Number | 0 |

### Content block settings

| Setting | Type | Default |
| --- | --- | --- |
| Content Tag | Select (Paragraph, Headline 1, Headline 2, Headline 3, Headline 4, Headline 5) | p |
| Alignment | Text alignment | left |
| Content | Inline rich text | Add headlines, text, and more with th… |

### Rich Text block settings

| Setting | Type | Default |
| --- | --- | --- |
| Alignment | Text alignment | left |
| Content | Rich text | <h4><b>Create Amazing Content</b></h4… |

### Image block settings

| Setting | Type | Default |
| --- | --- | --- |
| Image | Image | — |
| Aspect Ratio | Select (Auto, 4:1, 21:9, 16:9, 4:3, 1:1) | auto |
| Make Responsive | Checkbox | On |
| Desktop Image Width (requested from Shopify) | Number | 1100 |
| Mobile Image Width (requested from Shopify) | Number | 600 |
| Call to Action Link | URL | — |

### Video block settings

| Setting | Type | Default |
| --- | --- | --- |
| Hero Video | Video | — |
| Optional Link | URL | — |
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | Off |
| Loop Video | Checkbox | Off |
| Show Video Controls | Checkbox | On |
| Mute Video | Checkbox | Off |

### Button block settings

| Setting | Type | Default |
| --- | --- | --- |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |

#### Button Style
Set the look and feel of the button

| Setting | Type | Default |
| --- | --- | --- |
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |

### 5 Star block settings

| Setting | Type | Default |
| --- | --- | --- |
| Icon Color | Color | #111 |

### Icon block settings

| Setting | Type | Default |
| --- | --- | --- |
| Background | Color or gradient | linear-gradient(164deg, #0D8BF4 0%, #… |
| Icon Color | Color | #fff |
| Alignment | Text alignment | left |
| Icon Shape | Select (Square, Rounded, Circle) | circle |
| Icon Padding | Number | 25 |
| Icon Size | Range | 40 |
| Icon | Select (Cart, Gift, Gift Card, Shipping, Payment, Trending…) | tag |

### Image Icon block settings

| Setting | Type | Default |
| --- | --- | --- |
| Image | Image | — |
| Alignment | Text alignment | left |
| Icon Shape | Select (Square, Rounded, Circle) | circle |
| Icon Size | Range | 65 |

### Icon with Text block settings

| Setting | Type | Default |
| --- | --- | --- |
| Icon Color | Color | #111 |
| Icon Size | Number | 25 |
| Gap Between Content Items | Number | 20 |
| Text | Inline rich text | This is sample text to go along with … |
| Icon | Select (Cart, Gift, Gift Card, Shipping, Payment, Trending…) | tag |