Add the Same Tabs to Multiple Product Pages

If you would like to have the same tabs on several, many, or all product pages, it can be time-consuming to manually add the tabs HTML code to each product description.

Instead of manually adding the code, it is possible to customize the product template to automatically include the tabs on every product page using that template.

Add a Custom Liquid Section

Each Online Store 2.0-compatible theme includes a Custom Liquid section to enhance pages. Confirm your theme is compatible with OS 2.0, then complete these steps.

Open template

In your theme editor (Customize), use the page selector to open Products, then Default product.

Add section

In the left sidebar, select (+) Add section, then Custom liquid.

Add a Section to the Product Page

Add code

Open the Custom liquid section, then add the tab code to the Custom liquid field.

Adjust code to include content

Adjust the tab code's label and content placeholders to include your content.

Save.

Vintage Themes

The process for pre-Online Store 2.0 themes (known as 'vintage themes') is different.

Step 1: First open the code editor using these steps.

Step 2: Next, locate the "Sections" folder and click it to expand it.

Step 3: Select your theme

• Turbo/Parallax/Retina/Mobilia/Responsive/Artisan
• Flex

• Turbo/Parallax/Retina/Mobilia/Responsive/Artisan
  • Find the file "product-template.liquid" and click to open it.
  • Locate this code:
    {{ product.description | split: '<!-- split -->' | first }}
    
    Note: You will see two versions of this code, one for when the product description is above the "add to cart" button and one for when it is below it. See the code example below for details on exact placement. In addition, if you are using the product.details template, you will also need to update product-details-template.liquid in the same way.
• Flex

  The file you'll need to locate is based on your product page template you've chosen under Customize > Theme Settings > Layout.

  • If you're using the Classic product template, locate the "product__main.liquid" file, if you're using the Image scrolling product template, locate the "product-image-scroll__main.liquid" file, if you're using the Sections product template, locate the "product-sections__main.liquid" file.
  • For the "product__main.liquid" file or the "product-sections__main.liquid" file, locate this code:
    {{ product.description | split: '<!-- split -->' | first }}
    
    Note: You will see two versions of this code, one for when the product description is above the "add to cart" button and one for when it is below it. See the code example below for details on exact placement.
  • For the "product-image-scroll__main.liquid", locate this code:
    {{ product.description }}
    
    Note: You will see two versions of this code, one for when the product description is above the "add to cart" button and one for when it is below it. See the code example below for details on exact placement.

Step 4: After this code, add the tabs HTML code. Edit the titles and content as needed.

Different Tabs for Specific Products

If you have a few products that require a different set of tabs (or not tabs at all), there are some additional steps to follow:

Step 1: First, identify the handle of the product page.

Step 2: Above the tabs HTML code, add this "if statement" code: {% if product.handle == 'your-product-handle' %}, replacing 'your-product-handle' with the handle you identified in step 1.

Step 3: After your tabs HTML, add this code: {% endif %}

Step 4: If you prefer to hide tabs completely on a particular product page, simply use this code: {% if product.handle == 'your-product-handle' %}{% endif %}

Step 5: You can repeat this process with additional product handles. Please be aware, however, that excessive use of this code can cause performance or code issues. 

The "if statement" above can also be used within tab content if you will only have slight variations with tab content:

<ul class="tabs-content">
   <li class="active" id="tab1">{% if product.handle == 'your-product-handle' %}This product is not eligible for free shipping.{% endif %} Normal tab content</li>

Updating your tabs

If, in the future, you need to update information in your tabs, you can now edit the template or templates you edited above and all products using that template will automatically update with the new tab content.

If you used the "different tabs" approach above, keep in mind you will need to edit each block of code within the "if" statement separately. 

Putting the Product Description in the First Tab

While it is possible to place your product description in the first tab by using the standard {{ product.description }} Liquid tag in the body of your first tab, this can cause conflicts with Rich Snippets and, therefore, SEO, and therefore is not recommended without advanced customization.

Advanced Use

If you want to use multiple sets of tabs repeatedly, you can also duplicate the product.details.liquid or product.liquid files as outlined here. 

If you want to use the sections available on product.details.liquid, you should duplicate the product-details.liquid in the Templates folder and product-details-template.liquid file in the Sections folder, giving each one a unique name.

If you prefer to use the basic product.liquid template, you can follow the same approach outlined in this article, but duplicate and rename product.liquid in the Templates folder and product-template.liquid file in the Sections folder.

Important Notes and Limitations

• Unless you use the "different tabs" approach outlined above, ALL products that use the template you edit will have the SAME content. 
• However, products using product.details (product-details-template.liquid) can have different tabs than ones using the standard product template (product-template.liquid), but ALL of the products using product.details will have the SAME tabs, while all of the ones using the standard product template will have the SAME content.
• If you are using both product.details and product template, you will need to add the tabs HTML to BOTH files product-details-template.liquid and product-template.liquid.
• The content from your tabs will not be included in the product description rich snippets or Open Graph tags.
• The content from your tabs will also not appear in quick shop overlays when using this approach.
• While you can place most product review apps in the columns, using this approach may cause conflicts with rich snippets associated with reviews.