Tabs

Section

Display content in multiple tabs for better navigation

Available blocks

Used to show content in Text columns with icons format.

Used to show the product description (if placed on the product page) or manually inputted text.

Used to show content in table format.

Used to show content in a media combining with text format.

Use to show content in formatted text, allowing custom styles and layouts.

🤔 How to add a tab that shows content in Text columns with icons format?

The Tabs section has a Highlight tab block that can help you show your content in a tab that has multiple columns, highlighting key points using icons and short text. Here are more detailed guidance:

STEP 1: Add a Highlight tab block to the section:

After adding a Tabs section, click on “Add block”, and choose the Highlight tab block.

STEP 2: Set up each Icon setting group:

• Click on the Highlight tab to open its settings panel.
• Navigate to the Icon 1 setting group.
• Choose the Icon from the list, or choose None if you don’t want any.
• Upload a Custom icon image if needed, this will disable your picked Icon above.
• Enter the Heading and Text.

⚠️ Note: The Highlight Tab block lets you display up to 4 columns, each with an icon and text. To show all 4 columns, fill in the settings for Icon 2, Icon 3, and Icon 4. If you need less than 4, just leave the Heading and Text of an Icon setting group blank.

STEP 3:  Customize the whole block look:

After setting up each Icon group, you can:

• Enter the Tab title.
• Adjust the Heading size, Heading tag, and Content alignment.
• Adjust the Icon size.
• Adjust the Colors of the icon.

STEP 4:  Click “Save” when done. 

🤔 How to add a tab that automatically shows the Product description?

The Tabs section has a Description tab block that can help you show the Product description automatically based on that specific product if you are on the Product page. To set it up, do these:

STEP 1: Add a Description tab block to the section:

After adding a Tabs section, click on “Add block”, and choose the Description tab block.

STEP 2: Turn on the Show product description toggle:

In the Description tab block’s setting panel, turn on the Show product description toggle.

This text will change dynamically based on the product.

STEP 3: Add custom text

In the Description tab block’s setting panel, enter more information if needed into the Text field.

This text will remain unchanged across different products.

STEP 4:  Change how much content will be shown

In the Description tab block’s setting panel, find the Default content height setting. 

By default, it will show full content. Choosing a different option will make the “Read more” or “See less” button appear. 

STEP 5:  Set the tab title:

In the Description tab block’s setting panel,  fill in the Tab title field (e.g., "General Details" or "Specifications").

STEP 6: Click “Save” when done. 

🤔 How to add a tab that shows content in table format?

The Tabs section has a Table tab block that can help you show your content in a tabular format. Here are more detailed guidance:

STEP 1: Add a Table tab block to the section:

After adding a Tabs section, click on “Add block”, and choose the Table tab block.

STEP 2: Add the table content:

In the Table tab block’s setting panel, add content to the Table detail field in this format:

• Use a colon (:) to separate columns. For example:

Table detail	Result
Material: High-quality for durability…. Dimensions: Standard sizes vary by product

• Use a hyphen (-) to indent rows under a category. For example:

Table detail	Result
Performance: Designed for extreme conditions. - Capacity: Adjustable capacity. - Warranty: Backed by a 1-year ….

• To start a new row, press Shift + Enter to add a line break.

STEP 3: Set the tab title:

In the Table tab block’s setting panel,  fill in the Tab title field (e.g., "General Details" or "Specifications").

STEP 4: (Optional) Right-Align Values:

Toggle Right-align values if you prefer the text in the second column to align to the right for a cleaner look.

STEP 5:  Click “Save” when done. 

🤔 How to add a tab that shows content in media & text format?

The Tabs section has a Media with text tab block that can help you show your content in a format that has both media (image or video) and text. Here are more detailed guidance:

STEP 1: Add a Media with text tab block to the section:

After adding a Tabs section, click on “Add block”, and choose the Media with text tab block.

STEP 2: Add the content:

In the Media with text tab block’s setting panel, navigate to the Tab content group, and you can choose 1 option below:

• Option 1: Use content from an existing page by using Content from page.
• Option 2: Otherwise, enter your content into Subheading, Heading, Text, and Button label fields.

STEP 3: Add the media:

In the Media with text tab block’s setting panel, navigate to the Tab media group, and you can:

• Option 1: Add an Image. If you have a specific image for mobile 📱, upload it to Mobile image.
• Option 2: Add a Video or Embed video from url (Youtube or Vimeo). 

If you do both option, the Video will have your Image as the cover.

STEP 4: Set the tab title

In the Media with text tab block’s setting panel,  fill in the Tab title field (e.g., "General Details" or "Specifications").

STEP 5:  Click “Save” when done. 

🤔 How to add a tab that shows content in rich text format?

The Tabs section has a Rich text tab block that can help you show your content in a format that has both media (image or video) and text. Here are more detailed guidance:

STEP 1: Add a Rich text tab block to the section:

After adding a Tabs section, click on “Add block”, and choose the Rich text tab block.

STEP 2: Add the content:

In the Rich text tab block’s setting panel, enter your information into these fields: Heading, Text, and Button label (optional).

STEP 3:  Change how much content will be shown

In the Rich text tab block’s setting panel, find the Default content height setting. 

By default, it will show full content. Choosing a different option will make the “Read more” or “See less” button appear. 

STEP 4:  Set the tab title:

In the Rich text tab block’s setting panel,  fill in the Tab title field (e.g., "General Details" or "Specifications").

STEP 5: Click “Save” when done. 

🤔 What customization options can you give your Tabs?