Product description tabs are a very user friendly way to display product information on a product page properly.  It saves space and very handy to the users.  Almost every ecommerce website now a days use product description tabs on their website.

Unlike other e-commerce platform , its a little bit tricky to add product description tabs. Some shopify themes comes with a few tabs but most of them does not fully allow you to add different tabs for different products.

So today i will show you how you can very easily add product description tabs on your shopify theme.

Backup your theme

Before making any changes to your shopify theme, always make sure you backup your theme. To do this simply go to your shopify store admin area.   Go to online stores > themes.

Find the active theme. Click on the Actions button and click on the Download theme file link.  Shopify will email you a copy of the theme which you can download.

Once you have backup ready, now we can modify the theme codes, If anything goes wrong , you can always revert back to your backup theme.

Find the code to replace

Now we need to edit the themes code and replace a few lines of liquid code with our own.  Simply click on the Edit code link.

 

Now you need to find a code snippet that looks like  {{ product.description }} ,  Generally it should be inside  Templates > product.liquid .  Some themes load a section inside product.liquid , In that case find  Sections > product-template.liquid  or similar file.

Replace product description snippet with our own code

Replace {{ product.description }} with the code below.

{% assign description = product.description | replace: '<h3', '</div><div class="tab-content"><h3' %} 
<div class="prod_description"> 
<div class="spacer"> {{ description }} </div> 
</div>

Add required Javascript and stylesheet

After replacing the product description snippet with our own code, we need to add a little bit javascript and css next to it.  For tabs we are using jQuery ui . We need to load its js and css file.  Some themes may have load it already.   Then you donot need to add it again.  If your theme does not have it already we can add it from cdn server.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />

and then some of our own javascript  that will properly format the description and convert it into jquery ui tabs.

<script>
  jQuery(document).ready(function(){
  	var tabTitle = '<ul>';
  jQuery('.prod_description > div.tab-content').each(function(i, item){
      jQuery(this).attr('id', "tabs-" + i);
      var titletext = jQuery(this).find('h3').text();
      var titlelist = '<li><a href="#tabs-' + i + '">' + titletext + '</a></li>'
      tabTitle += titlelist ;
  });
  tabTitle += '</ul>';
  jQuery( tabTitle ).insertAfter('.spacer');
    jQuery('.spacer').remove();
  jQuery( ".prod_description" ).tabs();
  })
</script>

 

Adding custom css to make it look better

Now by default jquery ui tabs look like this.

But if you write a little bit of css , it can look as beautiful as this.

 

Though every themes color , fonts and sizes are different. You should write your own css to match the look of the tabs. I am just adding the css that i wrote for that website. If you want to use this same css, you can put it at the end of your themes css file.

.prod_description.ui-tabs.ui-corner-all.ui-widget.ui-widget-content {
    border: 0px !important;
    padding: 0px !important;
    border-radius: 0px !important;
}

ul.ui-tabs-nav.ui-corner-all.ui-helper-reset.ui-helper-clearfix.ui-widget-header {
    border: 0px !important;
    padding: 0px !important;
    border-radius: 0px;
    background: transparent;
    text-align: center !important;
    line-height: 0px;
}

.ui-tabs .ui-tabs-nav li {
    float: none;
    display: inline-block;
    margin: 0px;
    border-radius: 0px;
    background: transparent;
    border: 0px;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    color: rgb(51, 51, 51);
    font-size: 20px;
    font-weight: 500 !important;
    text-transform: none;
    color: rgb(128, 128, 128);
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    color: rgb(51, 51, 51);
    position:relative;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor:after {
    background: rgb(217, 18, 31);
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -1px;
    left: 0;
    right: 0;
    transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    z-index: 10;
}

.ui-helper-clearfix:before, .ui-helper-clearfix:after {
    display: none;
}

Adding tabs properly in product description

Once we are done with the theme customization.  Just save the files. Now go to Products > All products and edit the product where you want to add the custom tabs. the structure is very straightforward.  Every h3 header tag will be converted into a tab including the content thats placed after it , until the next h3 tag.

So just write your tab title, make it a h3 tag.  Put the content of that tab.  Then again put another tab title, make it h3 tag, Put its content there and keep repeating.

That’w how easy it is.

What can go wrong ?

  • Some times developer may write more complex codes in their theme and it might be hard for you to find the {{ product.description }}
  • Some themes may not load required jquery file, then you will have to add the jquery file by yourself before inserting the jquery ui javascript files.
  • Some themes may have conflict with jquery ui tabs and may not work properly.

In any of these cases, you can contact me and i can help you with your job for a very small fee. Or you can write your issue in the comment box, I will try to help when i get a chance.