Product Tabs Sidebar

Modified on Tue, 2 Mar, 2021 at 5:48 PM

There are 2 parts in this section: Categories and Collection

To create more content for each part, click Add Content and select the section Categories or Collection



1. Content

a. Collection

  • Title: Set the title for the Collection or use the title by default is Collection Title
  • Collection Item: Select the Collection that the data was uploaded before. 

Eg: you choose "Autumn" to show for the Tab's Title


In case you don't set the Title, it will automaticlly use the default name of the collection


b. Categories

  • Heading: Set the Title for the section Eg: Categories
  • Menu Item: Select Menu for the section. Click Edit Menu to modify it in a new tab
  • Show Product count: display the number of the products left in stock


  • View all label: Set the name of the label that you want to display the link
  • View all link: Paste a link or search for an available link


2. Settings

  • Section Label: Set a name for the whole section
  • Layout:
  • Box Layout: the content will be shrunk from two side margins
  • Background image: Select or Upload the image to the background
  • Background Size: Set the suitable size for background
  • Background Image Repeat: if the image is small and you want the image to cover fully the whole section, choose an option to repeat this image.
  • Background Image Position: choose a position for the image background
  • Section Padding: Order: Top Right Bottom Left. E.g: 5px 20px 5px 20px
  • Tick to have Padding Items


  • Section Heading
  • Heading alignment: Set the alignment for Heading
  • Give names for Heading, Subheading, and Subheading 2 of the section
  • Modify Colors for Heading, Subheading, and Subheading 2 (Blank to inherit color)



  • Slider Settings

Tick to:

  • Enable Slider
  • Enable Autoplay
  • Enable Loop: cause the slides to repeat 
  • Show Next & Prev arrows
  • Show Dots


  • Tab Settings
  • Set active tab by default: drag horizontally to set a tab that the one will display firstly (Value is the tab order number)
  • Tab content margin: in px
  • Show Button: have the button in case the products count in Collection is greater than Total items
  • Button Label: Set name for the button
  • Button style: Drag to choose the style for the button


  • Tab Title Settings
  • Position: Choose a position to place Tab's title
  • Item alignment: Set alignment for item (Left/ Center/ Right)
  • Tick to Use Main color as Background color
  • Set color for Tab's Title and Tab's Title Hover (Blank to inherit color)
  • Border for tabs style: select the border style
  • Spacing between Title items: Drag to set the number in px that corresponds to item space
  • Item padding: Eg. 5px 20px 5px 20px (Order: Top Right Bottom Left)
  • Title item font size (in px)
  • Title item font weight: select option for the font


  • Layout Content
  • Text align for product title: set position for product title
  • Max number of items per row: E.g: 4,3,2 (4 items for Fullscreen, 3 for Desktop, 2 for Mobile)
  • Total items: the total items to display on each collection
  • Set the color for Title product, Price product (Blank to inherit color)
  • Sidebar Settings
  • Position: set the position for the sidebar 
  • Text align for Menu contentLeft/ Center/ Right


  • Menu Title Padding: in px
  • Alter the colors for Menu text, Menu text hover, Menu View More
  • Sidebar Layout

Set 0 to Hide

  • Sidebar item: Width (1->12) E.g: 4,6,12
  • Tab item: Width (1->12) E.g: 4,6,12










Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article