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

Published Date: December 4, 2020

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

#4WeeksOfShopifyDev

Related Posts

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

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

December 31, 2020

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

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

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

December 24, 2020

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

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

December 21, 2020

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 [at] iliashaddad.com