Product page: Set up unique tabs in your product descriptions

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 ONLY ONE product. This is a unique tab. For example, information about the designer, product dimensions or ingredients.

Screenshot_2018-03-14_16.17.58.png

Adding unique 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 Actions button next to the blue Customize button on the right of your screen. Click Duplicate in the dropdown. This will create an unpublished safety copy.
  4. Next click the Actions button 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 **/
$($('.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
      	$('.js-accordion').prepend('<div id="acc-unique-'+ [i] +'" class="product-single__accordion__item js-accordion-info"><div class="product-single__accordion__item-wrap rte">' + tabContent + '</div></div>');
        $('.js-accordion').prepend('<a href="#acc-unique-'+ [i] +'" class="product-single__accordion__title js-accordion-trigger"><h4 class="product-single__accordion__title-text">' + tabName + '</h4><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></a>');

    } else {	

      	//hide empty H6
      	$(this).hide();
    }
});

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

  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.