Overview
Tabs are a great way to include more Product or other information within a limited space. For example, product details such as description, ingredients, shipping info and other important information can be organized into tabs, to save space and make your page more tidy.
One popular example for using tabs on a product page is to split up your product descriptions using tabs. You can create one tab for each part of the product description.
The Tabs section can be found in the "Text" category of the section library, or by searching for "Tabs" in the search bar:
A new Tabs element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "Tabs" element:
Adding Tabs + Content
Once the Tabs element has been added to your page, click directly on the element or on the "TabsβοΈ" button to open up the tabs setting in the sidebar:
In the "Items" section of the sidebar you can:
Add new tab items by clicking the "+ Add New Item" button
Expand/Collapse the tab item where you can add the Title for the item
Delete a tab item by clicking the ποΈ button
Rearrange the tab items via drag and drop
To edit the Text content included in a tab, double-click on the text element in the editor and edit as needed:
To add Image or Video content (or any other desired element) to a specific tab in addition to text, click on the text element and then on the β button above or below the text element to open the "Add Element" popup. Select the "Image", "Video" or any other element to add it to the tab content:
Editing the Appearance of Tabs
In the "Layout" section of the sidebar you can:
Choose a Layout option to use for the tabs element
Choose the Font Name, Font Size and Font Style to use for the tab items
Set the Active State colors for the Text and Borders of the tab items
Set the Inactive State colors for the Text and Borders of the tab items