How to add tabs to Shopify products

How to add tabs to Shopify products

283
19



This tutorial shows you how to add tabs to your product descriptions in Shopify. To view the written version of this tutorial, and access the code that I refer to in the video, go to http://ecommercepulse.com/producttabs.

19 Comments

  1. Update for August 2018:

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script&gt;
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
    <script>
    $(function() {
    $( "#tabs" ).tabs();
    });
    </script>

  2. So this code broke the website. Good thing it was a sandbox!

  3. @3:25 I’m on the theme page and I have nothing resembling the page you are on.

  4. Thanks for doing what you do to help us. However, I just can not make this work after many tries following your instruction step by step except for adding an "s" to the "HTTP" because Shopify is saying it may be a spam without the "s" https.
    My Theme is the "Minimal" Theme. Help

  5. I having problem with my production tabs. The pictures in between there is whites spacing, how I do I eliminate that?Please help…<div class="cgt-desc">
    <ul class="tabs clearfix">
    <li><a href="#tab-1" class="active">Description</a></li>
    </ul>
    <div class="cgt-content">
    <div id="tab-1" class="tab active">
    <center><img src="https://cdn.shopify.com/s/files/1/2455/2953/files/iPhone_X_-F1.jpg?2033923391736678166" alt="iPhone X-1" /><img src="https://cdn.shopify.com/s/files/1/2455/2953/files/iPhone_X01.jpg?2033923391736678166" alt="iPhone X-2" /><img src="https://cdn.shopify.com/s/files/1/2455/2953/files/iPhone_X_-F2.jpg?2033923391736678166" alt="”iPhone" x-3="" /><img src="https://cdn.shopify.com/s/files/1/2455/2953/files/iPhone_X_-F3.jpg?2033923391736678166" alt="iPhone X-4" /><img src="https://cdn.shopify.com/s/files/1/2455/2953/files/iPhone_X_-F4.jpg?2033923391736678166" alt="iPhone X-5" /><img src="https://cdn.shopify.com/s/files/1/2455/2953/files/iPhone_X_-F5.jpg?2033923391736678166" alt="iPhone X-6" /><img src="https://cdn.shopify.com/s/files/1/2455/2953/files/iPhone_X_-F6.jpg?2033923391736678166" alt="iPhone X-7" /><img src="https://cdn.shopify.com/s/files/1/2455/2953/files/iPhone_X_-F7.jpg?2033923391736678166" alt=" iPhone X-8" /></center>
    </div>
    </div>
    </div>

  6. Does the tutorial work in the new sectioned themes?

  7. Hi does any one know how do i edit the description code for all my store products at one ? God bless you

  8. Very useful. All works great. Thanks

  9. Also, if I were to make these tabs functional on every product in the store, where would I install code to make that happen universally instead of product by product? Thanks again!

  10. Hi Leighton, thank you for the tutorials! I got a warning about the unencrypted URLs when I completed steps 2 and 3. Have you run into problems of site visitors getting security warnings when visiting stores with this tab code installed?

  11. Hi,
    Thank so much you for this excellent detailed video, but unfortunately i have a the same problem as always and i i get is the same result no matter who is instruction i follow,
    Would you by any chance know Why dose may tabs looks like this and not look like actual tabs? any info would be highly appreciated,
    Please see screen shot attached,
    http://prnt.sc/e9mhth
    Thank you

  12. Hey Leighton, great videos!  I want to apply the product tabs to all of my products, without having to enter the code from step 4 into individual products each time. Is there a way to do this?

  13. Thanks Leighton for your advice and patient teaching. God bless!

  14. Leighton, really enjoyed your tutorial on this and I'm using it on a site I'm building.  My question is what if I want more than three tabs?  I tried duplicating code and changing to 4 and the tab itself showed up but the information below will not display.  Am I missing something?

  15. Im interested in adding only a video tab or a description and video tab.  I already have all my products added and they all have descriptions.  What will happen if i do this tutorial having all my content already added?  I would like to display a video about each product i have or at least the most important ones so even if the description was left as is and i could add a video tab or even just a video next to product image would be great. 

  16. Great! Glad you found this helpful. Let me know if there is anything else you'd like to see a tutorial on!

  17. Wow. I called customer service and they e-mailed me a link.
    I spent so many hours trying to figure it out and managed to do it in 15 mins with your video. Thank you so much 🙂

  18. Hi,
    Is there a way you can apply the tabs to all products so you don't have to do each product individually? What if you are using an upload?

Leave a Reply

Your email address will not be published. Required fields are marked *