How to Create Tabs for Shopify Product Pages




How to Create Tabs for Shopify Product Pages


Today we are going to add tabs to our Shopify Product page and use comment splits to assign content to each tab. Please know that this tutorial does require some knowledge of coding. If you are not comfortable making edits to your Shopify theme, please partner with a developer.

By the end of this article, we should have three tabs with custom names and content on our Shopify Product page. Let’s get started!

Assign The Description Split Variable

The first thing we need to do is assign the comment split function as a variable in our product-template.liquid file which can be found under sections > product-template.liquid. I’m going to assign the comment split to a variable called “productDescription”. If you plan to do the same, please feel free to copy and paste mine from below.

It is important to note that Shopify variables are case sensitive, so don’t forget the capital D.

{% assign productDescription = product.description | split: '<!-- split -->' %}

Create The Tab Container

Now we will define the space where we want our tabs to appear. For most individuals, this will be where the product description is already. Copy the code below and paste it in wherever you want these tabs to display on your storefront product pages.

<div class="tabset">
 <!-- ALL THE FOLLOW CODE GOES HERE -->
</div>

Place The Description Variables

Remember the variable we assigned in the beginning? We are now going to use that variable to assign the split sections into each of our tabs. Notice that the variable {{ productDescription }} has numbers at the end starting with 0. These numbers assign the content location based on the number of comment splits in your product description.

No comment split means that all content will show in {{ productDescription[0] }}. Any content after the first comment split will appear in {{ productDescription[1] }}.

You can create as many {{ productDescription[X] }} variables as you want, but for this tutorial, we will only be doing three.

Now we can add our variables into each of the content sections of our tabs. If you plan to only add the three tabs, feel free to just copy and paste the code from below.

<div class="tab-panels">
  <section class="tab-panel">
    {{ productDescription[0] }}
  </section>
  <section class="tab-panel">
    {{ productDescription[1] }}
  </section>
  <section class="tab-panel">
    {{ productDescription[2] }}
  </section>
</div>

Create The Tab Labels

Now that we have the content section of our tabs defined, next we will create the tab labels. This is a two part section because we will be using some fancy coding to let us assign the name of each tab using the tags section.

Copy and paste the code below above the tab section that we just pasted into our site. This code splits the tag after the colon, and adds anything after the colon as the tab label. There is no need to change the code below, but I will cover how to use the tag function shortly.

{% for tag in product.tags %}
  {% if tag contains 'tab1' %}
    {% assign tab_title_1 = tag | split: ':' | last %}
  {% endif -%}
 
  {% if tag contains 'tab2' %}
    {% assign tab_title_2 = tag | split: ':' | last %}
  {% endif %}
 
  {% if tag contains 'tab3' %}
    {% assign tab_title_3 = tag | split: ':' | last %}
  {% endif %}
{% endfor %}

Copy and paste the code below above between the tab-panels and the code we just added. There is no need to adjust this code either. The label name variables are assigned to the liquid code from the previous section.

<!-- Tab 1 -->
<input type="radio" name="tabset" id="tab1" aria-controls="{{ tab_title_1 }}" checked>
<label for="tab1">{{ tab_title_1 }}</label>
 
<!-- Tab 2 -->
{% if productDescription[1] %}
<input type="radio" name="tabset" id="tab2" aria-controls="{{ tab_title_2 }}">
<label for="tab2">{{ tab_title_2 }}</label>
{% endif %}
 
<!-- Tab 3 -->
{% if productDescription[2] %}
<input type="radio" name="tabset" id="tab3" aria-controls="{{ tab_title_3 }}">
<label for="tab3">{{ tab_title_3 }}</label>
{% endif %}

Using the Tag Function For Naming Tabs

The tags are assigned in the tag section on the product product in the Shopify Control Panel. The tag to name the tab will look like this: “__tab1:Tab Name”. Note the double underscore in the tag name, this helps distinguish the tags from other tags.

Now Time to Style Your New Tabs!

Now that all the HTML and Liquid code is setup, the last thing we need to do is style the tabs. You may add the code styles below which I got from Mark Caron on Codepen to style the tabs.

You may also style the tabs however you want.

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
 display: block;
}

/*
 Styling
*/
body {
 font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
 color: #333;
 font-weight: 300;
}
.tabset > label {
 position: relative;
 display: inline-block;
 padding: 15px 15px 15px;
 border: 1px solid transparent;
 border-bottom: 0;
 cursor: pointer;
 font-weight: 600;
}
.tabset > label:hover,
.tabset > input:focus + label {
 color: #06c;
}
.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
 background: #06c;
}
.tabset > input:checked + label {
 border-color: #ccc;
 border-bottom: 1px solid #fff;
 margin-bottom: -1px;
}
.tab-panel {
 padding: 30px 0;
 border-top: 1px solid #ccc;
}

How to use all this…

Now that everything is in place, let’s review how to use our new tab function. First let’s assign the name of our tabs using the tag functionality. I will name my tabs the following: Shopify custom tag for naming tab labels example

Next I will add two comment splits so I can assign the content in my product description to each tab. To add the comment splits to your product description, click the two angle-brackets in the right-hand corner of the product description section of the Shopify Control Panel. Now you may added your comment split to your product description.

Shopify code edit in product description section of the Shopify Control Panel

Hit save and your done! If everything went well, you should now have three product tabs each with the assigned content in each.

Shopify custom tag for naming tab labels example

Sources

Mark Caron on Codepen




Shopify Shopify Development Ecommerce Shopify Store