Caution: This is an advanced tutorial and is not supported by Shopify. This tutorial has been verified to work with Debut theme only. You can try to implement this on your theme, but keep in mind that it may not function. Knowledge of technologies such as HTML, CSS, JavaScript, and Shopify Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial. 

Once you have completed the steps in this tutorial, the custom tabs of your product will appear as a custom block on your products pages: 

Check out this demo product to see the tutorial result in action.

Step 1. Create a new Shopify Liquid snippet called custom-tabs.liquid

1. From your Shopify admin, go to Online Store > Themes.

2. Find your current theme (or the theme you want to edit) and then click Actions > Edit code.
   
   

3. On the left side, click the Snippets heading to access your Snippets. Once you get the list of snippets, click the Add a new snippet link.
   
   

4. Name your snippet ‘custom-tabs’. Click Create snippet:
   
   

5. Copy and paste the code listed below into your new custom-tabs.liquid’ snippet.

 {%assign custom_tabs = product.metafields.custom-tabs%}

  {%if custom_tabs.size > 0 %}

   <div class="custom-tab">

     {% for tab_info in custom_tabs %}

        {%assign tab_name = tab_info | first%}

         {%assign tab_value = tab_info | last%}

          {%assign default_tab = ''%}

              {% if forloop.first == true %}

             {%assign default_tab = 'id="defaultTabToBeOpen"'%}

             {%endif%}

         <button class="tablinks" onclick="expandTab(event, '{{tab_name}}')" {{default_tab}}>{{tab_name}}</button>     

     {%endfor%}

   </div>

  {% for tab_info in custom_tabs %}

  {%assign tab_name = tab_info | first%}

  {%assign tab_value = tab_info | last%}

  <div id="{{tab_name}}" class="custom-tab-content">

  <h3>{{tab_name}}</h3>

  <p>{{tab_value}}</p>

   </div>

  {%endfor%}

  {%endif%}

<br/>



<script>

function expandTab(e,t){var a,l,n;for(l=document.getElementsByClassName("custom-tab-content"),a=0;a<l.length;a++)l[a].style.display="none";for(n=document.getElementsByClassName("tablinks"),a=0;a<n.length;a++)n[a].className=n[a].className.replace(" active","");document.getElementById(t).style.display="block",e.currentTarget.className+=" active"}document.getElementById("defaultTabToBeOpen").click();

</script>

Step 2. Include custom-tabs.liquid in your product-template.liquid

1. On the left side of the screen (same section we used to find the Snippets), click the Sections heading to access your Sections.
   
   

2. Under the Sections heading, locate and click product-template.liquid to open your product template in Shopify built-in online code editor.

3. Find the perfect spot to place your custom tabs block within the product page. In this tutorial we’ll place it right under the product description. Find the following block of your product-template.liquid file: 
   
   

4. copy and paste the code listed below right under the product description section:

{% render "custom-tabs" %}

5. Proudly hit Save button:
   
   

Step 3. Add CSS styles.

Now you may want to add some CSS rules to make the whole thing look pretty. Go to Assets section and find your theme.scss.liquid file

 Open this file, copy and paste the code listed below and save changes.

// ***************************** Custom product tabs ****************************************//

/* Style the tab */

.custom-tab {

  overflow: hidden;

  border: 1px solid #ccc;

  background-color: #f1f1f1;

}



/* Style the buttons that are used to open the tab content */

.custom-tab button {

  background-color: inherit;

  float: left;

  border: none;

  outline: none;

  cursor: pointer;

  padding: 14px 16px;

  transition: 0.3s;

}



/* Change background color of buttons on hover */

.custom-tab button:hover {

  background-color: #ddd;

}



/* Create an active/current tablink class */

.custom-tab button.active {

  background-color: #ccc;

}



/* Style the tab content */

.custom-tab-content {

  display: none;

  padding: 6px 12px;

  border: 1px solid #ccc;

  border-top: none;

}

// ***************************** Custom product tabs ****************************************//

Step 4. Populate the metafields.

The custom functionality we implemented earlier is pretty easy to use and maintain. All you need to do to add a new tab to your product is to create a new metafield within the namespace specified in your custom-tabs.liquid Snippet file (the default namespace used in this tutorial is “custom-tabs”). The key of the metafield will be used as a heading of the tab and the value of the metafield will fill the content of the tab. For example, this is what metafields used to store tabs' content for our demo product look like “under the hood”: