Add tabs to Shopify product page: 10 minutes without apps

If you wish to add tabs to the product page of your Shopify store, you’re in the right place! 

Like the Shopify Buy button instruction we shared before, you don’t need extensive technical knowledge to solve this problem.

Since you may hear that Shopify doesn’t support adding tabs to product pages, you look for a solution on the Shopify app store. However, in fact, you don’t need an app for that. Adding tabs to your product page in Shopify is much easier than you think. Even those without a technical background can do it within 10 minutes!

So here is the step-by-step guideline for you on how to add tabs to the Shopify store.

How to add tabs to Shopify product page without application?

This tutorial will instruct you on the basic code to add tabs to your Shopify product page without installing any application from the app store.

Remember that, each theme has different files depending on the developer but basically, there is a file system to declare. 

Drive more sales with Wizz Flash Sales & Price Edit !!!

Boost your Shopify Store’s revenues by Flash Sales in a short time.

In case you can’t find what you want, just drop us a message, we’ll get back to you right away.

Now, take steps to the following guideline, find the correct file, add the code as instructed, and you will find it “a piece of cake”.

Let’s start!

Demo for tabs in product page
Demo for tabs in product page

The current demo will have 3 tabs:

  1. Product description tab
  2. Shipping tab (which is taken from a page called Shipping)
  3. Policy tab (whose content is taken from a page called Policy)

To do that, we’ll directly insert code in the theme optimization.

Step 1: Open Edit Code

Go to Themes > Action > Edit Code

Edit code for product page

Step 2: Find the product-template.liquid file

Scroll down to the “Sections”, then find the product-template.liquid or enter product-template.liquid in the search box.

FInd the code file of product page

Step 3: Find position of {{ product.description }}

To do this, open product-template.liquid, then use Ctrl + F (for Windows) or Command + F (for Mac).

FInd the code file of product page

Top 12 DIY Shopify customizations

Want to access to more content like this? This article is a part of the ebook “Top 12 DIY Shopify customizations”.

Step 4: Editing code

Replace {{ product.description }} with the following code:

<div class="tab-customize">
  <button class="tablinks-cus" onclick="openTab(event, 'tab-1')" id="tab-cus-active" >Information</button>
  <button class="tablinks-cus" onclick="openTab(event, 'tab-2')">Shipping</button>
  <button class="tablinks-cus" onclick="openTab(event, 'tab-3')">Policy</button>
</div>
<!-- Tab content -->
<div id="tab-1" class="tabcontent-cus">
  {{ product.description }}
</div>
<div id="tab-2" class="tabcontent-cus ">
  {{ pages.shipping.content }}
</div>
<div id="tab-3" class="tabcontent-cus ">
  {{ pages.policy.content }}
</div>
<style>
.tab-customize {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.tab-customize button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
.tab-customize button:hover {
  background-color: #ddd;
}
.tab-customize button.active {
  background-color: #ccc;
}
.tabcontent-cus {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>

Step 5: Click Save

Step 6: Open the file theme.js 

Then, insert the following script at the end of the file:

function openTab(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent-cus");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks-cus");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("tab-cus-active").click();
Open code file to edit tabs on product page

Step 7: Click Save to save your process.

Step 8: Add new page

Go to Pages in your Shopify Admin > Add page

How to add new page

Step 9: Fill in information for your new page

With tab 1: The content for this tab is the product description.

With tab 2: Add a new page named “Shipping” as the example below (or you can choose any name you want).

Remember, while adding information to the new page, make sure the handle of that page is the value of the variable in the code on the product page above.

The handle of the page must be similar to the code
The handle of the page
The part of code that show the handle of page
The part of code that relates to the handle of page

For tab 3, do the same as tab 2, add another page named Policy, add the necessary information.

Step 10: Go to any product page on your store and…

TADAAAAA…

You did it!

This article is a part of an ebook that provides a step-to-step guide to customize your Shopify theme, feel free to grab the full free eBook: Top 12 DIY Shopify customizations to drive sales

Enjoy the result

Easy huh?

As you can see, adding tabs for your product page is not as hard as you think. Therefore, I bet you can do it yourself with just several simple steps.

No application installing, no technical background needed.

It’s not so scary!

Okay, that’s it! I’m sure this instruction does help you in optimizing your product page.

In case you are still not content with your store, let’s check other features to be edited or added to your Shopify theme.