Add tabs to product descriptions


This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Because all themes are different, no single method will serve all themes perfectly. Please use this as an overview and not as an exact method.

For this demo, you will adding three tabs to all product pages. In the first tab, you will load up the product description. In a second tab, you will load up a snippet. In the third tab, you will load a static page.

Check for jQuery

Most themes use jQuery, but, just to be sure, check your theme.liquid file for the presence of jQuery.

If your theme does not already use jQuery, you will need to include jQuery in the head of your document. To check if you're already using jQuery, open the theme.liquid in the online code editor. Use the shortcut command+f (mac) or ctrl+f (pc) and find the term "jQuery". If you can locate it, you're already using it, and if not, then it's time to include it in your header.

Edit product.liquid

In the product.liquid template, locate your product description.

{{ product.description }}

Replace it with the following code:

  <ul class="tabs">
    <li><a href="#tab-1">Info</a></li>
    <li><a href="#tab-2">Shipping</a></li>
    <li><a href="#tab-3">Returns</a></li>
  <div id="tab-1">
  {{ product.description }}
  <div id="tab-2">
  {% include 'shipping' %}
  <div id="tab-3">
  {{ pages.returns.content }}

In the first tab, you will load your product description. So, you will change the link to "Info" and add the liquid tag for the product description into the div holding the tab's content.

In the second tab, include a snippet, mainly because this will contain content that you do not want indexed by search engines, or to come up in a site search.

In the third and last tab, place the content of the Returns page. It doesn't matter if that comes up in a search or is indexed by Google.

Add some jQuery

Once you have your markup in place, add the following JavaScript code at the bottom of your product.liquid template:

  $(document).ready(function() {
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        active = $(this);
        content = $($(this).attr('href'));
        return false;

You should end up with something like this:

Product tabs 2

Use CSS to make it beautiful

With CSS, you will end up with something like this:

Product tabs 3

Here is some sample CSS to add at the bottom of your product.liquid template:

ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
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: none repeat scroll 0 0 #F5F5F5;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #303030;
  border-bottom:none !important;
ul.tabs li {
  background: none repeat scroll 0 0 #FFFFFF;
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #111111;
  height: 30px;
  margin: 0 0 0 -1px;
  padding-top: 4px;
  position: relative;
  top: -4px;
ul.tabs li:first-child {
  margin-left: 0;
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
ul.tabs:after {
  clear: both;

View the example site here:

Want to discuss this page?

Visit the Shopify Community