Products and Collections


Add the Same Tabs to Every Product Page

Custom Code

Please note that this change involves making direct changes to the theme code. If you encounter difficulties with this, please contact a third party developer for more troubleshooting, customization or functionality.

Supported Versions

The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.

 

In This Article

 

If you would like to have the same tabs on every product page, it can be time consuming to manually add the tabs HTML code to every product description, especially if you find later you need to make an update to the tab content.

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

 

Adding the same tabs to every product page

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
    • 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: '' | 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.

tabs-code.jpg

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.

Related articles