Help: Product description tabs break when using an alternate product template

If you are using a custom product template and the product description tabs aren't being displayed properly, we’ll walk you through a fix. 

Note: Alternatively, you can use the product-template-alternate.liquid which you will find here.

1. Access your themes section
2. Open the Loft theme code
3. Add code

1. Access your themes section

Login to your Shopify admin, and then click “Online Store” (on the left side of the admin). This takes you to the “themes” area of your Shopify store.

Example themes section

2. Open the Loft theme code

Next, click the button that says “Actions” - followed by “Edit code” which will load the live code editor. It consists of a left hand sidebar, which lists all the files on Loft, along with a right hand code editing panel.

Shopify code editor

3. Add code

You need to edit your custom product template as well as the theme.js.liquid, theme.scss.liquid and add a few lines of code. Do the following steps:

1. Search for the "Sections" folder
2. Open your custom product template file
3. Add the following block of code at the top of the file

   {% assign uniqueString = section.id | remove: "product-template" %}

4. Replace every instance of this code 

   {{ section.id }}

   with this code

   {{ uniqueString }}

   For an easier search, hit ctrl+f(windows)/command+f(mac) on your keyboard and type the word "section"

5. Click "Save"
6. Search for the "Assets" folder
7. Open the "theme.js.liquid" file
8. Go on line 3827 and paste the code from the link here

   Before 

   

   After

    

   Note: On line 3830 replace the value of the "data-section-id" property with the name of your alternate template's section
9. Add the following block of code to the last function of the theme.js.liquid at the bottom of the file

   sections.register('product', theme.Sections.ProductLargeTemplate);

   Before 

   

   After

    

10. Click "Save"
11. Open the "theme.scss.liquid" file
12. On line 3094 add the following block of code 

    , #ProductThumbs-product-alternate-template > .slick-dots li

    Before 

    

    After

    

    On line 4929 add the following block of code 

    , #ProductPhoto-product-alternate-template.slick-initialized

    Before 

    

    After

    

    On line 5080 add the following block of code 

    ,#ProductSection-product-alternate-template

    Before 

    

    After

    

    (Version 1.4.0 or later) On line 5340 add the following block of code 

    ,#ProductThumbs-product-alternate-template

    Before 

    

    After

    

    Note: Replace "product-alternate-template" with the name of your alternate template's section. Also, don't forget the commas!

13. Click "Save"