Skip to content
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 |