fbpx
HIDE

How to add tabs to Shopify product page without an app?

In fact, you don’t need a Shopify product page app to to this. Adding tabs to your product page in Shopify is much easier than you think. Even those without technical background can do it within 10 minutes!
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on pinterest

If you wish to add tabs to the product page for 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.

You may know that Shopify doesn’t support adding tabs to product pages, so you look for a solution on the Shopify app store. 

In fact, you don’t need a Shopify product page app for that. Adding tabs to your product page in Shopify is much easier than you think. Even those without technical background can do it within 10 minutes!

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



Add tabs to Shopify page without application

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

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

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

 

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

Let’s start!

Add tabs to Shopify product page

The current demo will have 3 tabs:

  • Tab 1: Product description
  • Tab 2: The content for this tab is taken from a page called Shipping
  • Tab 3:  The content for this tab is taken from a page called Policy.

We’ll directly insert code in the theme optimization.

Step 1: Go to Themes > Action > Edit Code

Add tabs to Shopify product page from theme customization

Step 2: Scroll down to the “Sections”, find the product-template.liquid

Add tabs to Shopify product page edit code

Can’t find what you need?

Drop us a message, we’ll get back to you right away!

Step 3: Open that file, find for {{ product.description }}. To do this, use Ctrl + F (for Windows) or Command + F (for Mac).

Add tabs to Shopify product page code edit

Step 4: Replace it 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(); 
 
Add tabs to Shopify product page theme js

Step 7: Click Save to save your process.

Step 8: Go to Pages in your Shopify Admin > Add page

Add tabs to Shopify product page add pages

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” (or you can choose any name you want). Remember, after adding a new page, make sure the handle of that page is the value of the variable in the code on the product page above.

Add tabs to Shopify product page handle

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

 

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

 

TADAAAAA…

You did it!

Enjoy the result

Easy huh?

Adding tabs for your product page isn’t as hard as you think. 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 these instructions do help you in optimizing your store. Still need help? Drop us a message or leave a comment, we’ll get back to you very soon!

Don’t forget to subscribe to HappyPoints.io for more useful tips & tricks!

Still need help? Tell us! We’re here to help

Hannah Pham

Hannah Pham

Hannah is Content Lead at HappyPoints. She finds writing, designing, and developing all sorts of great content is her true passion. Hannah is the Marketer by day and the reader by night. Meet her on Linkedin.

Amazing!

I will get back to you within a day.

Have a nice time!