Skip to main content

Add Product Tabs Using Metafields

Create custom tabbed content sections on your product pages using metafields and Liquid code.

Advanced Tutorial

Verified for the Debut theme only. May require adjustments for other themes. Not officially supported by Shopify.

Step 1: Create a Liquid Snippet​

Create a file called custom-tabs.liquid in Snippets:

{%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 in Product Template​

In product-template.liquid, add below the product description:

{% render "custom-tabs" %}

Step 3: Add CSS​

In theme.scss.liquid, add:

.custom-tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.custom-tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
.custom-tab button:hover { background-color: #ddd; }
.custom-tab button.active { background-color: #ccc; }
.custom-tab-content {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Step 4: Populate Metafields​

In Metafield Studio, create metafields under the custom_tabs namespace. The key becomes the tab heading, and the value becomes the tab content.