Tabs

Section overview

The Tabs section creates horizontal tabs that can display different content blocks when selected. It provides a clean, organized way to present multiple information categories within a single section.

Common use cases

• Product information display (specifications, warranty, shipping details)

• FAQ or help sections with categorized information

• Location and contact information with maps and details

• Presenting step-by-step instructions or processes

Usage tips

• Use clear, concise tab names that accurately describe the content

• Limit the number of tabs to 3-5 for better usability

• For mobile views, consider using the split layout option for better readability

• Keep content within each tab focused and consistent in structure across tabs

Section settings

Setting	Description
Tabs	Comma-separated list of tab names that will be displayed as selectable options
Heading	Main heading displayed above the tabs
Content	Rich text content displayed below the heading
Button label	Text for the optional button
Button URL	URL for the optional button
Top spacing	Amount of padding above the section (0-300px)
Bottom spacing	Amount of padding below the section (0-300px)
Color scheme	Background and text color combination for the section
Border color	Color for section borders
Button color	Color scheme for the section's button
Border position	Where borders appear on the section (none, top, bottom, or both)
X alignment	Horizontal alignment of content (left, center, or right)
Enable margin	When enabled, applies horizontal margin to the section
Enable max width	When enabled, restricts content width to improve readability
Enable split	When enabled, displays header and content in a side-by-side layout
Visibility	Controls section visibility on different devices (all, mobile only, desktop only)

Block settings

Heading

A simple text heading block to create section titles within a tab.

Setting	Description
Tab	The tab name this block should appear in (must match a tab name from section settings)
Content	Heading text to display

Content

A rich text content block for adding formatted text within a tab.

Setting	Description
Tab	The tab name this block should appear in (must match a tab name from section settings)
Content	Rich text content to display

Buttons

Adds one or two buttons within a tab.

Setting	Description
Tab	The tab name this block should appear in (must match a tab name from section settings)
Button label	Text for the primary button
Button URL	URL for the primary button
Color button	Color scheme for the primary button
Secondary button label	Text for the secondary button
Secondary button URL	URL for the secondary button
Secondary color button	Color scheme for the secondary button

Image

Displays an image within a tab.

Setting	Description
Tab	The tab name this block should appear in (must match a tab name from section settings)
Image	The image to display

Video

Embeds a video within a tab.

Setting	Description
Tab	The tab name this block should appear in (must match a tab name from section settings)
Video	The video to display
Enable autoplay	When enabled, automatically plays the video when tab is selected
Enable mute toggle	When enabled, displays a button to toggle video sound
Enable loop	When enabled, the video will continuously repeat

Newsletter

Adds a newsletter subscription form within a tab. Limited to 1 per section.

Setting	Description
Tab	The tab name this block should appear in (must match a tab name from section settings)
Content	Text content displayed above the email input
Button label	Text for the subscribe button
Disclaimer	Optional text displayed below the form (privacy policy, etc.)
Success message	Message shown after successful subscription
Color button	Color scheme for the subscribe button

Accordion

Creates an expandable/collapsible content section within a tab.

Setting	Description
Tab	The tab name this block should appear in (must match a tab name from section settings)
Heading	Title for the accordion
Content	Rich text content revealed when accordion is expanded
Icon	Optional icon displayed before the heading
Color scheme	Color styling for the accordion
Enable open	When enabled, accordion is expanded by default

Discount

Displays a discount code with a copy button within a tab.

Setting	Description
Tab	The tab name this block should appear in (must match a tab name from section settings)
Content	Text content displayed above the discount code
Code	The discount code customers can copy
Color button	Color scheme for the copy button