Content Tabs Section
What This Section Does
The Content Tabs Section creates interactive tabbed interfaces that let customers switch between different content areas without leaving the page. Each tab can contain any combination of blocks, making it perfect for organizing related information in a compact, user-friendly format.
Perfect for: Product features comparison, FAQ organization, showcasing different product categories, organizing lengthy content, creating interactive product showcases
How to Add It
Step 1: Add the Section
- In your Shopify admin, go to Online Store → Themes
- Click Customize next to your live theme
- Click Add section in the main content area
- Choose Content Tabs from the list
Step 2: Build Your Tabs
- The section comes with sample tabs pre-configured
- Add additional Tab Item Blocks for more tabs
- Within each tab, add any combination of theme blocks
- Customize the tab titles and overall styling
Key Settings to Configure
Tab Appearance
Tab Header Alignment: Control where tab buttons appear
- Left: Traditional tab layout, good for content-heavy tabs
- Center: Balanced look, great for equal-importance tabs
- Right: Unique positioning for design-focused layouts
Card Styling: Control the container appearance
- Card Border: Add subtle borders for definition
- Border Radius: Adjust corner roundness (none to full circle)
- Card Padding: Control spacing inside the tab container
Tab Content
Tab Item Blocks: Each tab is a separate block that can contain unlimited nested blocks
- Tab Title: The clickable label that appears in the tab header
- Nested Blocks: Add any combination of theme blocks inside each tab
- Content Organization: Group related information logically within each tab
Visual Design
Color Scheme: Choose from your theme's color schemes
- When to use: Match your page's overall design or create contrast for emphasis
Page Width: Control how wide the tabs appear
- Regular: Standard width for most content
- Narrow: Focused, compact layouts
- Full: Edge-to-edge for maximum content space
Pro Tips for Success
Content Organization Best Practices
- Keep tab titles short: Use 1-3 words for easy scanning
- Group related content: Put similar information types in the same tab
- Balance tab content: Avoid having one very long tab and several short ones
- Use consistent block types: Maintain similar layouts across tabs for predictability
- Mobile-friendly design: Tabs automatically become scrollable on smaller screens
Common Mistakes
- Too many tabs: More than 5-6 tabs become overwhelming on mobile
- Unclear tab labels: Vague titles like "More Info" don't help users
- Inconsistent content depth: Mixing simple text with complex layouts confuses users
- Overloading single tabs: Keep individual tab content scannable and digestible
Content Block Integration
This section works with the complete theme blocks system, allowing you to add:
Basic Elements:
- Heading blocks for tab titles and sections
- Text blocks for descriptions and information
- Button blocks for calls-to-action
Visual Elements:
- Image blocks for product photos or graphics
- Icon blocks for visual hierarchy
- Divider blocks for content separation
Interactive Elements:
- Accordion blocks for nested organization
- Custom modal blocks for additional details
- Contact form blocks for inquiries
Advanced Content:
- Video carousel blocks for media content
- Progress blocks for feature comparisons
- Map blocks for location information
Common Use Cases
Product Feature Tabs
- Tab 1: "Features" with bullet points and icons
- Tab 2: "Specifications" with detailed product data
- Tab 3: "Reviews" with customer testimonials
Service Information
- Tab 1: "What's Included" with service details
- Tab 2: "Process" with step-by-step workflow
- Tab 3: "Pricing" with package comparisons
FAQ Organization
- Tab 1: "General Questions" with basic info
- Tab 2: "Shipping" with delivery details
- Tab 3: "Returns" with policy information