How to add a Tab section to your pages with EcomSolid | Help Center

This article will guide you through steps to add a tab section on your pages with EcomSolid.

The Tab section is designed to separate content into different panes, and each pane is viewable one at a time. Your customers can decide which content to be displayed by clicking the content’s corresponding tab control.

In EcomSolid, you will have two options to add a Tab section to your pages in minutes.

Add the Product Tab section to the Product Pages

Step 1: From the EcomSolid Dashboard, head to the Theme Editor or Page Editor.

Step 2: Access the Library from the top bar of the Editor Page.

Next, navigate to Sections > Product Description. Hit “Insert” to add the Product Tabs to your Editor.

Please be noted that the Product Tabs section is only available for the Product pages.

Step 3: Click on the section to start configuring the settings.

Pick a product:

The default selection is “Auto,” which means the product’s description will be randomly selected to display on the current Editor page. Hit “Pick a product” and choose one product from the list to see how it will be displayed. If you pick a specific product at this point, only the data of that product will be shown on your live page. To enable the automatic data syncing feature, keep the default selection - Auto.

EXTRA INFO 1:

Toggle on/off the Extra info switch to show/hide the tab. The content of this tab will be pulled from the Description section of your Shopify Admin.

EXTRA INFO 2,3,4:

Toggle on/off the Extra info switch to show/hide the corresponding tab. The content of these tabs can be customized as you want.

Step 4: Don’t forget to hit “Save” and “Update Live” when finished.

Add the tab section to other pages

Unlike the Product Tabs section, the Content section can be used for all types of pages.

Step 1: From the EcomSolid Dashboard, head to the Theme Editor or Page Editor.

Step 2: Access the Library from the top bar of the Editor Page.

Next, navigate to Sections > Content. Locate the content section below and hit “Insert” to add it to your Editor.

Step 3: Click on the section to start configuring the settings.

You will see a list of atoms included in the Content. Hover over the Tab Items and click on the Duplicate icon of a tab to add more tabs. To remove one, click on the Trash icon of the selected tab.

Step 4: To customize the section further, click on each atom to reveal its configuration on the left sidebar.

Step 5: Don’t forget to hit “Save” and “Update Live” when finished.

If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.