Product Tabs Not Working in Shopify Store

Question

So I added product tabs to Shopify using the tutorial at https://help.shopify.com/en/themes/customization/products/features/add-tabs-to-product-descriptions

Unfortunately, the tabs are still not working. While the tabs do appear, if you click on one, it scrolls the page instead of switching to a new tab.

It really seems like jQuery isn't working. Here's the code I'm currently using (FYI I'm using the Narrative theme and the website is https://wellprepared.com).

$(document).ready(function() {
$('ul.tabs').each(function(){
  var active, content, links = $(this).find('a');
  active = links.first().addClass('active');
  content = $(active.attr('href'));
  links.not(':first').each(function () {
    $($(this).attr('href')).hide();
  });
  $(this).find('a').click(function(e){
    active.removeClass('active');
    content.hide();
    active = $(this);
    content = $($(this).attr('href'));
    active.addClass('active');
    content.show();
    return false;
  });
}); });

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 a.active {
  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 a.active {
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <ul class="tabs">
    <li><a href="#tab1">Description</a></li>
    <li><a href="#tab2">Reviews</a></li>
  </ul>
  <div id="tab1">
    <h5>Description</h5>
  {{ product.description }}
  </div>
  <div id="tab2">
  <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  </div>
</div>

The code above seems working well. Perhaps there are some misconfiguration or disconnection between the website and shopify CDN content. — Ali Sheikhpour
Not sure what you mean by misconfiguration or disconnection. I haven't modified the Narrative theme beyond minor integrations (analytics, lucky orange, etc) and of course the tabs. I'm currently only using 5 plugins. The only thing I can think of is perhaps jQuery isn't active on the theme, but I added the jquery and jquery UI lines in the header. — jnayer

Hamza Ahmad Hamza Ahmad · Accepted Answer · 2019-03-27T08:07:56

Your jQuery isn't loading.

Try adding the jQuery in the theme.liquid in between the <head></head> tags, not in the header.

Add the jQuery lines just before the tag.

Also confirm that you have the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

In between the <head></head> tags; above the other lines of jQuery code and that you don't have it twice, otherwise it conflicts.

Hope this helps.

Product Tabs Not Working in Shopify Store

1 Answers