Tabs content settings

This guide describes the Tabs content section.

Use the Tabs Content section to organize information into separate, clickable tabs.

Tab Content Options:

Each tab can include one of the following layouts:

Image with Text Layout: Combines an image, text, and a button — ideal for promotional content or feature highlights.
Content Tab: Includes just a heading and description — perfect for straightforward information like product details or policies.

Demo store: A Tabs Content section displayed on the product detail page, featuring a three-tab layout for organizing product information.

Image with text tab

Content tab

How to access the Tabs content section

Note: Section cannot be added to the Password page.

From any page, click on “Add Section” and choose “Tabs content” from the list.

To insert a new section between existing ones, follow the steps in the article "Add a section"

The “Tabs content” section consists of two primary components:

Image with text. To learn about all available block settings, see the related article "Image with text"
Tab. To learn about all available block settings, see the related article "Tab"

Select a setting described in the following table:

Setting

Description

Color scheme

Apply Color Scheme:

After creating your color schemes in theme settings — 'Colors' tab, you can apply them to different sections of your store.
In each section or block, you'll see a Color scheme dropdown.
Select the appropriate color scheme for each section, ensuring consistency with your brand's identity.

Tab navigation style

Select the navigation style for tabs:

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.