Content Tabs let you organize and display information in a tabbed format. Clicking on a tab shows different content without leaving the page.
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Content tabs', then click on 'section'
3) Done, your Collapsible content section is added.
General settings
The general settings contains the settings for the styling and layout of the Content tabs section.
Simply click on the 'section' to open the settings.
Content position: Select the position of tabs either showing them on left or Center.
Compact view: Set's the width to compact.
Heading size:
Set the size of the primary and secondary heading, choose between Small, Medium, Large and Extra large.
Heading:
Set the title of your section here. You can now also add a secondary heading.
Heading font:
Select font family for your primary and secondary heading.
Enable custom styling to have custom text styling other than default typography.
Bottom spacing desktop/mobile:
Set the spacing on the bottom for desktop and mobile.
That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.
How to configure the content tabs
By default, there are 3 tabs added, you can edit them, remove them or add more items.
1. Editing the tab
To edit the tab you simply click on it you want to edit in your sidebar:
Heading: Add a title for your tab.
Icon: Add an icon that displays with your tab tittle.
Custom image: If you don't want to have icon you can consider adding an image to go with your tittle.
Max image width: Control the width of custom image you added above.
You've many content type of options that you can add as your tab content;
Collections: Select a collection to show in your tab as your tab content:
Maximum products to show: Once you have selected a collection you can set number of products to show.
Products per row: This controls the products per row, if list includes more products than shown, it will be a slider automatically. Swipe is automatically activated on mobile.
Text: Add text as your tab content.
Page content: Select a page to display as your tab content.
Image: You have an option to add images in your tabs.
Image width: Control the width of the image you've uploaded in your tab as tab content.
We have made it more advanced by allowing merchants to add codes as their tab content.
If you want to have a contact form in a tab check this box.
2. How to remove a content tab?
To remove a tab you simply click on the tab you want to remove in your sidebar on the left of your screen.
Scroll down and find the remove block button:
Simply click on this button and your tab will be deleted.
3. How to add an additional content tab?
To add you simply click on the 'Add content tab' button in your sidebar on the left of your screen.
