Tips to Optimsie Your Site

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

By Hannah on April 15, 2020 0 Comments

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!

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

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

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

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();

Step 7: Click Save to save your process.

Step 8: Go to Pages in your Shopify Admin > Add 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” (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.

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!

Leave a comment

Your email address will not be published. Required fields are marked *

Hello, let’s get in touch!

Leave your contact info below
and one of our consultants will be in touch with you shortly.

Holler Box