Product page: Set up unique tabs in your product descriptions using H6 headings

Global vs Unique tabs

Venue comes with the ability to add 'Global' tabs to your product descriptions using the theme editor. Global means all of your products will receive exactly the same content in their tabs. This is great for information that relates to ALL products  - like a returns policy or general delivery details.

Please refer to the related article linked at the bottom of this page for more on setting up global tabs.

However sometimes you may wish to create a tab of information that pertains to a single product. This is a unique tab. For example, information about the designer, product dimensions or ingredients. 

You do this by using the H6 headings in your product description. But first you have to add some code to your theme to activate this feature.

Adding unique H6 tabs code to your theme

1. Log in your Shopify store admin
2. Click on Online store to get to the themes area of your admin.
3. We suggest you make a safety copy of your live theme by clicking the button with the three dots next to the Customize button on the right of your screen. Click Duplicate in the dropdown. This will create an unpublished safety copy.
4. Next click the button with the three dots again and select Edit code.
5. Once the code editor window is open type 'custom.js' in the search box in the top left of the code editor to filter the files on view.
6. If you look down the filtered list of files in the left sidebar you will see a file called custom.js inside the Assets folder. Click on that to edit the code. (If custom.js file does not exist in your theme, search for main.js.liquid instead)
7. Scroll right to the bottom of this file.
8. Hit return a couple of times to add some space between the existing code and the new code you are about to paste in

The unique tabs code is as follows:

/** Unique tabs using H6 as an anchor **/
document.addEventListener("DOMContentLoaded", function(event) { 
  $($('.product-single__content-text').find('h6').get().reverse()).each(function(i) {
      var tabName = $(this).text();
      tabContent = '';
      //check if h6 has text inside
    if ($(this).text() != '') {
          //hide h6
        $(this).hide();
          //combine content between H6 elements
          $(this).nextUntil('h6').each(function() {
              tabContent = tabContent + this.outerHTML;
              //hide content
              $(this).hide();
          });
          //generate tab HTML
          $('.product-single__accordion.js-accordion').prepend('<div id="acc-unique-'+ [i] +'" class="product-single__accordion__item js-unique-info" style="display:none;"><div class="product-single__accordion__item-wrap rte">' + tabContent + '</div></div>');
          $('.product-single__accordion.js-accordion').prepend('<a href="#acc-unique-'+ [i] +'" class="product-single__accordion__title js-unique-trigger"><div class="product-single__accordion__title-wrapper"><h3 class="product-single__accordion__title-text u-large f-family--body">' + tabName + '</h3><span class="product-single__accordion__title-icon icon-fallback"><i class="icon icon--plus" aria-hidden="true"></i><span class="icon-fallback__text">Open tab</span></span></div></a>');
      } else {  
          //hide empty H6
          $(this).hide();
      }
  });
  $(".js-unique-trigger").click(function() {
    var thisItem = $(this).attr("href");
    var activeClass = "js-active";
    //check if clicked is active
    if ($(thisItem).hasClass(activeClass)) {
      //close current item
      $(this).removeClass(activeClass);
      $(thisItem)
      .removeClass(activeClass)
      .stop()
      .slideUp();
    } else {
      //open and activate this item
      $(thisItem)
      .addClass(activeClass)
      .stop()
      .slideDown();
      $(this).addClass(activeClass);
    }
    return false;
  });
});

Remember to save your edited code by clicking the blue Save button top right of the screen. Check your work.

Creating unique tabs in your product description with H6 headings

1. Add a heading at the bottom of your product description in the Shopify product page editor - this will be your tab heading.
2. Add some content below the heading - this will end up inside the tab - it can be video, text, images, anything you wish.
3. Highlight the heading and change it to a 'Heading 6' using the formatting button at the top of the text editor.
4. Save your product and check that it works on the live store.

You can create as many unique tabs as you wish.