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
- 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.
- Feature Highlights: Showcase various features or aspects of a single product. Each tab could provide detailed information about specifications, reviews, and pricing.
- Customer Support: Provide segmented information about shipping, returns, and support policies, giving customers quick access to important information.
- 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.
- 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 |
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 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.