Product Tabs

Modified on Tue, 02 Mar 2021 at 05:48 PM


1. Content

- Click "Add content" to have products from Collection on tabs

- Add Big Content to display special product 

  • Set Title for each tab that you created
  • Select the Collection item and Big product item that you want its product display on tab
  • Modify Big product position and its Width

2. Settings

  • Section Label
    Name the section. E.g Product Tabs
  • Layout 

  • Box Layout 
  • Choose Background Color or Background Image for the section
  • Background Image: modify those features of background

- Size

- Image Repeat

- Image Position

- Section Padding: follow the order: Top Right Bottom Left

  • Section Heading
  • Select the Heading alignment: Left / Center / Right
  • Add Text for Heading, Subheading, Subheading 2 as you wish > modify colors for them (blank to inherit color)

  • Slider Settings 
    Select the features if you want each of them to apply to a display
  • Enable Slider
  • Enable Autoplay
  • Enable Loop
  • Show Next & Preview Arrows
  • Show Dots
  • Tab Settings

  • Set active tab by Default: horizontally drag to set which tab will appear first. Value is the tab order number
  • Tab content margin: order - Top Right Bottom Left. add a comma to separate the settings for Desktop and Mobile. e.g 30px 0 0 0,20px 0 0 0
  • Show Button by ticking
  • Alter the Button Text
  • Drag horizontally to choose the Button Style

  • Tab Title Settings

  • Position: select a placement to show Tab Title
  • Item alignment: Right / Center / Left
  • Use Main color as background
  • Alter the Tab color and Tab Hover color (blank to inherit color)
  • Select Border style for Tab
  • Spacing between Title itemsDrag to have more space between each tab
  • Item padding: add a comma to separate the setting for each interface. Eg: 10px 25px,10px 20px,10px 15px - Desktop, Fullscreen, Mobile (Order: Top Right Bottom Left)
  • Alter font size and font weight for Text Items
  • Layout Content

  • Text align for product title: Left / Center / Right
  • Max number of items per row: use commas to separate the settings for each interface. E.g: 4,3,2
  • Total items: allow the number of items per tab
  • Tick to have Item Padding and Border Radius
  • Alter the color for Title Product and Price Product

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 atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article