Product Tabs

Assuming you’re using Shopify and the Brooklyn theme you would add this code into your product-template.liquid file where you would like it shown.

<div class="grid">
  <div class="grid__item">
    <ul class="tabs">
      <li class="tab-link current" data-tab="tab-1">
        <p class="tab-title" for="tab-1">Product Description</p>
      </li>
      <li class="tab-link" data-tab="tab-2">
        <p class="tab-title" for="tab-2">Product Reviews</p>
      </li>
      <li class="tab-link" data-tab="tab-3">
        <p class="tab-title" for="tab-3">Why Shop With Us?</p>
      </li>
    </ul>
    <section class="tab-content current" id="tab-1">
      <div class="text-center">
        <h3>Product Description</h3>
      </div>
      <div class="product-single__description rte" itemprop="description">
        {{ product.description }}
      </div>
    </section>
    <section class="tab-content" id="tab-2">
      <div data-id="{{product.id}}" id="shopify-product-reviews">
        {{ product.metafields.spr.reviews }}
      </div>
    </section>
    <section class="trusted tab-content" id="tab-3">
      <div class="text-center">
        <h3>Why shop with us?</h3>
      </div>
    </section>
  </div>
</div>

 

Add this to the bottom of your product-template.liquid file above {% schema %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
//This is the code that will change the content when tabs are pressed
$(document).ready(function(){
  
  $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
  })

})
</script>

In your Assets folder create a new file and name it custom-tabs ending with .css and copy paste this code below.

.tabs {
  margin: 0;
  list-style: none;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  background: #FAFAFA;
}
.tab-content {
  padding: 20px 0 0;
}
.tab-link {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  text-align: center;
  font-weight: 600;
  color: #bbb;
  border: 1px solid transparent;
  border-bottom: 1px solid #ddd;
  display: table-cell;
}

.tab-link:hover {
  color: #888;
  cursor: pointer;
}

/* .tab-link:first-child{
  border-left:none !important; 
}

.tab-link:last-child{
  border-right:none !important; 
} */

.tab-link.current {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
  background: #FFF;
}

.tab-title {
  display: block;
}
.tab-content {
  display: none;
}
.tab-content.current {
  display: block;
}

.tab-link p {
  margin: 0;
}

.tab-title:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}
.tab-title[for*='1']:before {
  content: '\f129';
}
.tab-title[for*='2']:before {
  content: '\f005';
}
.tab-title[for*='3']:before {
  content: '\f128';
}
@media screen and (max-width: 650px) {
  .tab-title {
    font-size: 0;
  }
  .tab-title:before {
    margin: 0;
    font-size: 18px;
  }

}
@media screen and (max-width: 400px) {
  .tab-title {
    padding: 15px;
  }
}

 

Make sure you also call it by adding this line of code into your theme.liquid file

{{ 'custom-tabs.css' | asset_url | stylesheet_tag }}

Font Awesome is required to show the icons so make sure you also call it by adding this line of code into your theme.liquid file or visit their website https://fontawesome.io for the latest version

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">