How to add tabs on your Shopify product pages : description, shipping and returns, questions

We will learn how to create a tab system on shopify to better organize the content of your product pages.

This system will allow you to fill in redundant information once and for all in separate tabs like “shipping and returns” and “questions”. Moreover, you are free to rename these headings, titles and texts to suit your needs.

So the idea is to write the texts in the generic tabs only once to avoid having to type them continuously in your Shopify product descriptions!

This is a huge time saver, don’t you think so? 😉

You can see the result on this demo store : https://speed-ecom-tutorials.myshopify.com/

Password : Speedecom

How to set this up?

The description tab will take the content you add as a product description in the shopify product editor.

The 2 others are empty and so it’s up to you to write what you want while respecting certain web standards.

A text must be surrounded by html tags : so a <p>Your text</p> is a paragraph that begins with <p> and ends with </p>.

It is imperative to respect this syntax !!!

In short here is the result you will get (not necessarily with the same colors as it will be different depending on your theme)

Reminder:

The line of code (in your theme files) that displays in your product page the text/description you enter within the shopify product editor is the following one:

{{ product.description }}}

Memorize the property because you will have to find it and replace it with the code you will find below.

Your theme may have that code in two places, so it will be necessary to do the manipulation twice.

Let’s now move on to the technical part

Just follow these steps:

1. Go to the admin and click on “Online store”

2. Click on Action -> Edit code

3. Find the “Sections” folder and click on it. This will unroll the files within it

4. Click on the product-template.liquid file

5. Find the code line {{ product.description }} and replace it with the code below

6. You can now modify at your convenience the content of the tabs in the code

<style>#my-tab h2 { margin-top:0; } #my-tab ul.tabs li a.active,#my-tab ul.tabs li:last-child a{border-top-right-radius:2px}#my-tab,#my-tab ul.tabs:after{clear:both}#my-tab{margin-top:15px;overflow:hidden;display:block}#my-tab ul.tabs{border-bottom:1px solid #DDD;display:block;margin:0;padding:0}#my-tab ul.tabs li{display:block;float:left;height:45px;margin-bottom:0;padding:0;width:auto}#my-tab ul.tabs li a{-moz-border-bottom-colors:none;-moz-border-image:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:#F5F5F5;border-color:#DDD!important;border-style:solid;border-width:1px 1px 0 0;display:block;font-size:15px;height:45px;line-height:30px;margin:0;padding:7px 12px;text-decoration:none;width:auto;font-weight:700;color:#303030;border-bottom:none!important}#my-tab ul.tabs li a.active{background:#fff;border-left-width:0;border-top-left-radius:2px;color:#111;height:46px}#my-tab ul.tabs li:first-child a.active{margin-left:0}#my-tab ul.tabs li:first-child a{border-top-left-radius:2px;border-width:1px 1px 0}#my-tab ul.tabs:before,ul.tabs:after{content:" ";display:block;height:0;overflow:hidden;visibility:hidden;width:0}#tab-1,#tab-2,#tab-3,#tab-4{border:1px solid #e7e7e7;border-top:0;padding:25px 35px 35px;min-height:215px}@media(max-width:600px){#my-tab ul.tabs li{width:100%;float:none;display:block}#my-tab ul.tabs,#my-tab ul.tabs li{height:auto}}</style>
          <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
          <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
          <script>$(document).ready(function(){$("ul.tabs").each(function(){var t,i,a=$(this).find("a");t=a.first().addClass("active"),i=$(t.attr("href")),a.not(":first").each(function(){$($(this).attr("href")).hide()}),$(this).find("a").click(function(a){return t.removeClass("active"),i.hide(),t=$(this),i=$($(this).attr("href")),t.addClass("active"),i.show(),!1})})});</script>
          <div id="my-tab" class="my-tab">
            <ul class="tabs">
              <li><a href="#tab-1">Description</a></li>
              <li><a href="#tab-2">Shipping & returns</a> </li>
              <li><a href="#tab-3">Any questions?</a></li> </ul>
            <div id="tab-1">
              {{ product.description }}
            </div>
            <div id="tab-2">
              <h2>Add a heading here</h2>
              <p>Add a text here</p>
            </div>
            <div id="tab-3">
              <h2>Add a heading here</h2>
              <p>Add a text here</p>
            </div> 
          </div>

7. Click on the “save” button or press ctrl + s

This tutorial is also available in video format

Hope you found this tutorial helpful ! You have any ideas for new tutorials ?

Any questions about this one ? Leave me a comment 😉

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

Leave a Reply

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