The Tabbed Content section lets you organize information into clickable tabs, making it easy for customers to find exactly what they're looking for without scrolling through long pages. When a customer clicks a tab button, the content for that tab appears on the right side with a smooth animation.
This article covers:
Perfect for:
Product feature breakdowns
Store policies (Returns, Shipping, Warranties)
Sizing guides and fit information
Frequently asked questions
Event details and schedules
Educational content about products or services
Configuring the Tabbed Content Page Builder Component
Section Title (Optional)
The main heading that appears above your tabs. Use this to introduce what the tabs are about.
Example: "Why Choose Our Shoes?" or "Shipping & Returns Information"
Tip: You can leave this blank if you want the tabs to speak for themselves.
Section Subtitle (Optional)
A smaller description that appears below your title. Use this to provide additional context.
Example: "Everything you need to know about our products" or "Click each tab to learn more"
Tip: Keep this brief—one sentence is usually enough.
Adding Individual Tabs
Click the Add a New Tab + button to create each new tab. You can add as many tabs as you need!
For Each Tab, You'll Fill Out:
1. Tab Title (Required)
The text that appears on the button customers click. This will be displayed in all uppercase for visual consistency.
Best Practices:
Keep it short (1-3 words)
Make it descriptive and scannable
Use parallel structure (all nouns or all verbs)
Good Examples:
Durability
Free Shipping
Size Guide
How It Works
Avoid:
Long phrases like "Click here to learn about our return policy"
Generic labels like "Tab 1" or "Info"
2. Tab Intro (Optional)
A subheading that appears at the top of the tab content, right after the customer clicks. Use this to provide a brief context or summary.
Example: "Built to last through thousands of miles" or "We make returns easy"
When to use it:
When your tab content is long and needs an introduction
To emphasize a key benefit or feature
When the tab title alone isn't descriptive enough
When to skip it:
If your tab title is clear enough on its own
If you want to jump straight into the details
For very short content
3. Tab Content (Required)
The main content that appears when customers click the tab. This is a large text area where you can add as much information as you need.
You can include:
Plain text paragraphs
Bold text using `<b>bold text</b>` or `<strong>bold text</strong>`
Italic text using `<i>italic text</i>` or `<em>italic text</em>`
Bulleted lists using `<ul><li>Item 1</li><li>Item 2</li></ul>`
Numbered lists using `<ol><li>Step 1</li><li>Step 2</li></ol>`
Line breaks using `<br>` tags
Links using `<a href="https://example.com">link text</a>`
Our system will automatically fix common HTML tag mistakes (like `<b>text<b>` instead of `<b>text</b>`)
Organizing Your Tabs
Reordering Tabs
Click and drag the handle icon (≡) on the left side of any tab to move it up or down. The first tab will be automatically selected when customers first see the section.
Put your most important or most commonly needed information in the first tab!
---
Deleting Tabs
Click the red trash icon in the top-right corner of any tab to remove it.
There's no undo, so make sure you really want to delete it before clicking!
Design Tips
How Many Tabs Should I Use?
2-4 tabs: Ideal for most use cases
5-6 tabs: Still manageable, but make sure each is necessary
7+ tabs: Consider breaking content into multiple sections or using an Accordion instead
Writing Tab Content
1. Start with the most important information first—customers should get value immediately
2. Use short paragraphs(2-3 sentences max)
3. Add bullet points to make content scannable
4. Include specific details rather than vague statements
5. Use active voice ("We ship within 24 hours" vs. "Orders are shipped within 24 hours")
When to Use Tabbed Content vs. Accordion
Choose Tabbed Content when:
Information is parallel (product features, policy types)
Customers need to compare options side-by-side
Content is organized by category or topic
You want a modern, button-based interface
Choose Accordion when:
Information is sequential (steps, timeline)
Customers might need to see multiple sections at once
You have many items and vertical space is a concern
Content is FAQ-style (question → answer)