What is the Product Tabs section?
The idea of tabs on websites was originally made to mimic the physical tabs at the top of traditional paper file folders inside a file cabinet. This kind of design allows you to display a lot of information in one fixed section of screen real estate, divided by and accessed through different tabs.
In EcomSolid, you can organize your product information in a table split into different tabs. Let’s dive into the details!
Add the section to your theme
Step 2: In the Editor, open the Library and search for “Product Tabs”
Step 3: Hit “Insert” to add the section to the page.
After a split second, the section will be added to the bottom of your page.
The Product Tabs section has 4 pre-built tabs. The configurations will be available on the left sidebar, which we will cover in the next section.
Configure the settings
The left sidebar settings of the Product Tabs section are divided into the Content and Design tabs.
Current Preset: The Product Tabs section currently has only one preset.
Pick a product: Click on this button to select a button to display. If set to Auto then the Product Tabs section will fetch data from the main product of the product page (demonstrated in the page’s URL handle).
Extra Info 1: This first tab will fetch the product description from the chosen product, along with a few options:
- Toggle switch (show or hide this tab)
- Label Content: Edit the tab’s label
- View More toggle (turn View more button on or off)
- Text View More (View More enabled): Edit the label of the view more button
- Text View Less (View Less enabled): Edit the label of the view less button
- Content Description Height: Adjust the tab’s height
Extra Info 2/Extra Info 3: The second and third tabs support long text or images with the same configurations.
Extra Info 4: The last tab is where your product reviews are shown. Your favorite review apps are supported and the widget will be shown here with no additional steps.
- Position labels: Left, Center, or Right
- Labels Extra Info Color: Edit the color of the inactive tabs’ labels.
- Labels Extra Info Color: Edit the color of the tabs’ labels when hovered.
- Labels Extra Info Active Color: Edit the color of the label of the active tab.
- Content Extra Info Color: Edit the text color.
- Border Color: Edit the tab's border color.
- Text “View More” Color: Edit the “View More” button’s color
- Background Color: Edit the section’s background color.
- Labels Extra Info Font Size: Edit the label’s font size in pixels.
- Description Font Size: Edit the description font size in pixels.
- Content Extra Info Font Size: Edit the content’s font size in pixels.
- Text “View More” Font Size: Edit the “View More” button’s font size in pixels
- Margin and Padding: Adjust the corresponding values in pixels.
The section supports 19 different entrance animations, you will see animation in action when you pick one or hit the “Preview” button.
Finally, hit “Save” and “Preview” to check for the result before publishing. To publish, hit “Update Live”, then “Yes, Update”.