Product Tab
The best way to help your customers understand your products is by offering them all information they need. The more information you provide, the more they know about your products, which may result in a better conversion rate. Normally, there are 3 tabs in the single product page namely Description, Additional Information, and Reviews.
Product tabs are the places that display all additional product information you want to show for customers such as documents, maps, tutorial videos, etc. The standard information may be enough for normal products. This article will talk about the Product tab element and show you how to configure styles for this Product element.
1. Generals
From the left side (Elements tab) > Product elements option, you will see the Product Tab element in the list of elements. Drag and drop it to any position of the selected structure. This element only can be used on the Product pages.
With the Product Tab element, you can build some layouts below:
2. Content
- Tab title dropdown: Click here to see the options to configure style for the tab.
- Title: Add the string that you wanna show on the Description tab here.
- Icon: Choose an icon for this tab here.
- HTML Tag: Choose the Heading tag for the Tab title here.
- Tab ID: Add the ID for the tab here.
- Add new tab: Click here to add more tabs for the Product tab.
- Show as vertical checkbox: Tick on this checkbox to show the Product tab in the vertical layout.
- Gap item option: Configure the gap item here. Drag the bar to see the change.
3. Design
3.1. Item
- Alignment: Allow you to align the Product Tab item. You can choose Align Left, Align Right or Align Center. This option is available for desktop, tablet, and mobile devices.
- Width: Configure the Width for the Product Tab item here.
- Background: Configure the background color for the Product Tab item here.
- Border: Choose border style for the Product Tab item here. You also can choose None style to disable the border.
- Border Radius: Allow you to configure the border radius for the Product Tab item, available for desktop, tablet, and mobile devices, available for desktop, tablet, and mobile devices.
- Spacing: Set the spacing (by the way increase margin/ padding) between the Product Tab item here. This option is available for desktop, tablet, and mobile devices.
3.2. Text & Icon
3.2.1. Text
- Typography: This option allows you to customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc… for the Product Tab title here.
- Text Shadow: Allow you to add a shadow for the Product Tab title by changing the Blur, Horizontal, Vertical, etc…
- Text Color: Configure the color for the Product Tab title here.
Note: You can configure the style of the Product Tab title on Normal, Hover and Active mode.
3.2.2. Icon
- Size: Configure the size of the icon on the Product tab here.
- Rotate: Configure rotate for the icon here.
- Color: Configure the color for the icon here.
- Background: Configure the background color for the Product tab icon here.
- Border: Choose border style for the Product tab icon here. You also can choose None style to disable the border.
- Border Radius: Allow you to configure the border radius for the Product tab icon, available for desktop, tablet, and mobile devices, available for desktop, tablet, and mobile devices.
- Margin: Set the margin between the Icon and Product tab title here. This option is available for desktop, tablet, and mobile devices.
3.3. Content
- Background: Configure the background color for the Product tab content here.
- Box Shadow: Allow you to add a shadow for the Product tab content by changing the Blur, Horizontal, Vertical, etc…
- Border: Choose border style for the Product tab content here. You also can choose None style to disable the border.
- Border Radius: Allow you to configure the border radius for the Product tab content, available for desktop, tablet, and mobile devices, available for desktop, tablet, and mobile devices.
- Spacing: Set the spacing (by the way increase margin/ padding) between the Product tab content and other options here. This option is available for desktop, tablet, and mobile devices.
Note: You can drag/add any elements to the Product tab content. But for the Description tab, better you should drag & use the Description element.
You also can drag and use other text elements on the Description tab. But if you do not use the Description element, you have to build the Product Description manually and it will take your time.
Sam as the Description tab, on the Review tab, you should drag and use the Review element. On the Additional Information tab, you should drag and use the Attributes element.
In addition, if you add the Shipping Information tab for your product page and the Shipping & Delivery time for every single product is different. How we can show different shipping times for products when using the same Product template?
The answer is using Metafiled. You can configure to set Metafiled for the product, so the Shopping time will different. This action should be configured in the Shopify backend! You guys can click here to learn more about how to configure and use the Metafield element.
View the video below to know how to configure the Product Tab:
