How to make product description tabs in Shopify without a Shopify app?

In the fourth article of the #4weeksOfShopifyDev challenge, I'll be talking about to add product tabs without using a Shopify app

Note: I'm using the Debut theme, you may have different Shopify theme

Demo Product Page

How to make product description tabs in Shopify without a Shopify app?

Create a product template

First, we need to create a custom product Shopify template and called product-tabs.liquid

How to make product description tabs in Shopify without a Shopify app?

Create a new Shopify section and called product-template-tabs and paste the code from the product-template section

How to make product description tabs in Shopify without a Shopify app?

Change the section in product-tabs.liquid to product-template-tabs

How to make product description tabs in Shopify without a Shopify app?

Install reviews app and configure tabs

Create new Shipping policy page

How to make product description tabs in Shopify without a Shopify app?
  • Replace {{ product.description }} in product-template-tabs.liquid with this code
 <div >
  <button onclick="openTabs('Description')">Description</button>
  <button  onclick="openTabs('Reviews')">Reviews</button>
  <button onclick="openTabs('Shipping')">Shipping Policy</button>
</div>
     <div style="margin:10px 0;" id="Description" class="tab">
  <h2>Description</h2>
{{ product.description }}
</div>
<div style="margin:10px 0;display:none" id="Reviews" class="tab" >
  <h2>Reviews</h2>
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
<div  style="margin:10px 0;display:none;" id="Shipping" class="tab" >
  <h2>Shipping Policy</h2>
  {{pages['shipping-policy'].content}}
</div>
      <script>
        function openTabs(tabName) {
  var i;
  var x = document.getElementsByClassName("tab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}
      </script>

Et voila, you have product tabs without a Shopify app

Subscribe below to get notified of new posts.

Related Posts

Convert your Shopify store to PWA for better performances (conversion)

On the 16th of the #4WeeksOfShopifyDev challenge, I’ll be talking Why you should convert your Shopify store to PWA for better performances?

What benefits of being a Shopify partner and make money using it?

On the 15th of the #4WeeksOfShopifyDev challenge, I’ll be talking about what benefits of being a Shopify partner?

Why developers should invest in learning the Shopify App or Theme development?

On the 14th of the #4WeeksOfShopifyDev challenge, I’ll be talking about why developers should invest in learning and becoming a Shopify developer.

Let's Build Something Together

Feel free to reach out if you're looking for a developer, have a question, or just want to connect.

Email:contact@iliashaddad.com

© Ilias Haddad 2021. All rights reserved.

Made with ❤️ in Morocco 🇲🇦