Tabs

Section overview

The Tabs section creates horizontal tabs that can open different content based on user interaction. It provides a clean way to organize and display multiple types of content within a single section.

Common use cases

• Product information with different tabs for details, shipping, care instructions

• FAQ sections with questions organized by categories

• Store information with tabs for location, hours, and policies

• Multi-step guides or instructions broken into logical sections

Usage tips

• Keep tab names short and descriptive for better mobile display

• Limit the number of tabs to 4-5 for optimal user experience

• Ensure the most important content appears in the first tab, as it displays by default

• Consider mobile layout - tabs stack and scroll horizontally on smaller screens

• Use consistent content types within each tab for better user experience

Section settings

Setting	Description
Tabs	Comma-separated list of tab names
Heading	Main heading for the section
Content	Main content text for the section
Button label	Text for the primary button
Button URL	Link URL for the primary button
Top spacing	Space above the section (in pixels)
Bottom spacing	Space below the section (in pixels)
Color scheme	Background color theme for the section
Custom color	Custom background color (if "custom" color scheme is selected)
Text color	Force light or dark text color
Border color	Color for section borders
Button color	Color scheme for the section's button
Enable color fade	Transitions the background color when scrolling
Border position	Where to place borders around the section
X alignment	Horizontal alignment of content (left, center, right)
Enable margin	Add horizontal margin to the section
Enable max width	Limit the width of content elements
Enable split	Split the section into two columns
Enable split heading	Split the heading from the main content
Visibility	Control visibility on mobile or desktop devices

Block settings

Heading

Creates a title text within a tab. This block is used to add prominent text headings to organize content.

Setting	Description
Tab	The tab name this block should appear in
Content	Heading text to display

Content

Adds rich text content to a tab. This block allows for formatted text with basic HTML elements.

Setting	Description
Tab	The tab name this block should appear in
Content	Rich text content to display

Buttons

Adds one or two buttons to a tab. This block allows for creating call-to-action elements.

Setting	Description
Tab	The tab name this block should appear in
Button label	Text for the primary button
Button URL	Link URL for the primary button
Button color	Color scheme for the primary button
Secondary button label	Text for the secondary button
Secondary button URL	Link URL for the secondary button
Secondary button color	Color scheme for the secondary button

Image

Displays an image within a tab. This block allows for visual content to be included in tabs.

Setting	Description
Tab	The tab name this block should appear in
Image	The image to display

Video

Embeds a video within a tab. This block allows for video content with customizable playback settings.

Setting	Description
Tab	The tab name this block should appear in
Video	The video file to display
Enable autoplay	Automatically start video playback
Enable mute toggle	Show a button to toggle audio on/off
Enable loop	Continuously loop the video

Newsletter

Adds a newsletter subscription form to a tab. This block is limited to 1 per section.

Setting	Description
Tab	The tab name this block should appear in
Content	Text explaining newsletter benefits
Button label	Text for the subscribe button
Disclaimer	Optional legal disclaimer text
Success message	Message shown after successful subscription
Button color	Color scheme for the subscribe button

Accordion

Creates expandable/collapsible content within a tab. This block is useful for FAQs or detailed information.

Setting	Description
Tab	The tab name this block should appear in
Heading	Title for the accordion
Content	Content displayed when the accordion is expanded
Icon	Optional icon to display with the heading
Color scheme	Style/color of the accordion
Use open accordion	Whether the accordion should be expanded by default

Discount

Displays a discount code with copy functionality within a tab. This block is useful for promotions.

Setting	Description
Tab	The tab name this block should appear in
Content	Descriptive text about the discount
Code	The discount code customers can copy
Button color	Color scheme for the copy button