Product Page Tabs

Learn how to configure the look & feel, shipping tab settings and review app tab.
Written by Jonathan Diaz
Updated 2 months ago

Product Page Tabs

1 The first step is to open the sections area of your Shopify theme config and go into the Product page - Tabs section.

Step 1 image

2 Enable/Disable product page tabs here.

Step 2 image

3 Enable product descriptions here. Default - ON. 

Step 3 image

4 You can enable product tabs below the ATC button on a per product basis with this option here. 

Apply the tag 'tabs-below-atc' to any products that you would like to utilize this alt placement on. 

Step 4 image

5 Select the tabs' position.

You can show tabs below the ATC button or below the product image, this is a global setting. 

Step 5 image

6 Now, select the description tab position.

You can show descriptions either below the ATC button separately or in Tabs.

Step 6 image

7 Next, enter the description tab title(heading).

Ex. 'Description'.

Step 7 image

8 Next, select the Default Tab.

The selected tab will be shown on page load.

Step 8 image

9 You can enable the shipping tag here.

Step 9 image

10 Next, enter title text for the shipping tab.

Ex. 'Shipping'.

Step 10 image

11 Next, enable show country flag to show the country flag in the shipping tab.

Step 11 image

12 Next, enter the Shipping Text.
This text shows before the country name in the shipping tab.

Ex. 'This item ships to'

Step 12 image

13 Next, enter the delivery text(side title).

Ex. 'Delivery'.

Step 13 image

14 Next, enter the delivery description text.

Ex. 'Estimated between'.

Step 14 image

15 Next, enter the delivery start date.

Note: Enter number only, From the current date.

Step 15 image

16 Next, enter Delivery End Date.

Step 16 image

17 Now, scroll up and click Show Product Delivery.

It will show delivery text in the shipping tab.

Step 17 image

18 Next, enter Delivery Cut Off time.

Ex. '16:00:00'

Step 18 image

19 Next, enter Delivery Exclude Days.

Note: Enter days separated with space.
Ex. 'SAT SUN'.

Step 19 image

20 Now, enter the Delivery Information Text.

It will show below the shipping text in the shipping tab.

Ex. 'Will usually ship within 1 business day'.

Step 20 image

21 Next, enter the shipping tab description text, if you want to show extra text in the shipping tab.

Step 21 image

22 Enable the review tab here.

Step 22 image

23 Select the customer review position here.

Step 23 image

24 1. Show reviews in tabs
2. Show reviews Below ATC button
3. Show reviews Below the Tab section.

Step 24 image

25 Next, enter the review tab heading.

Ex. 'Review'

Step 25 image

26 Enable the display of review stars on product pages herel

Step 26 image

27 You can enable the display of review stars on collection pages here.

Step 27 image

28 Now, click Add tabs to add an extra tab.

Be sure to also enable the tab with this checkbox.

Step 28 image

29 Enter tab heading.

Ex. 'Specification'.

Step 29 image

30 Next, enter the tab description text.

Step 30 image

31 Specification tab.

Repeat steps 28 to step 31 to add more tabs.

Note: The customer review tab will be the last.

Step 31 image

32 Now, click save to save your theme config and preview your changes.

Step 32 image

Here's an interactive tutorial for the visual learners

https://www.iorad.com/player/1587816/DemoStore---Product-Page-Tabs

Product Page Tabs give your customers more information up front, without the need to search your website for all their answers. Under every single item, you’ll have the most important questions a consumer has on their mind: When is it coming? When will it get here? Can I trust you? As well as a slew of other information. Use them wisely and your conversions will skyrocket!

 

Background – Changes the background color of the tabs.

Border Color – Changes the border color surrounding the tabs.

Selected Tab Border Color – Changes the color of the currently viewed tab.

Title Font Color – Changes the font color of the tab titles.

Title Font Font Size – Changes the font size of the tab titles.

Title Font Font Style – Changes the style of the tab title fonts. Lighter, Normal, Bold, and Bolder.

 

General:

Enable Tabs – Enable or disable product tabs.

Enable Description Tab – Enable or disable the description tab.

Description Tab Heading – Change the description tab heading. Ex: “About this product:”

Select Default Tab – Select your default tab title. The tab you select here will display your selected tab first.

 

Shipping Tab Settings:

Enable – Toggles the shipping bar on or off.

Header Text – Changes the header text of the shipping tab.

Show Country Flag – Enable or disable displaying of country flags based on geolocation.

Shipping Text – Enter your shipping text here. Ex: “This item ships worldwide.”

Show Product Delivery – Shows the estimated delivery date to customers.

Delivery Text – Change the delivery text.

Delivery Text 1 – Change secondary delivery text. Ex: “Your product will arrive in…”

Delivery Start Date – The minimum amount of days to deliver. Ex: 3 = 3 Days.

Delivery End Date – The maximum amount of days to deliver. Ex: 14 = 14 Days.

Delivery Cut Off – Specifies the cut off time for your shipping practices. Typically in line with your business hours.

Delivery Exclude Days – Exclude days your parcel service doesn’t deliver. Usually Saturday and Sunday.

Delivery Information Text – Lets you inform customers when their items will ship. Ex: “Ships in 1 business day.”

 

Review App Tab:

Use Loox Review App – Enables use of the Loox Review app.

Use Shopify Review App – Enables use of the official Shopify Review app. Only one can be enabled at a time. We’ve gone ahead and embedded the code for you, so you don’t have to.

Enable Review Tab – Only displays when Custom Tabs are not enabled & will only work If Shopify or Loox are installed.

Review Tab Heading – Change the label of your review tab. Ex: “Testimonials.”

Enable Review Star On Product Page – Toggle display of review stars on product pages on or off.

Enable Review Star On Collection Page – Toggle display of review stars on collection pages on or off.

Did this answer your question?