Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save projoomexperts/8888ad587081d9d9b3b1f380739e1b69 to your computer and use it in GitHub Desktop.
Save projoomexperts/8888ad587081d9d9b3b1f380739e1b69 to your computer and use it in GitHub Desktop.
Very simple code to show tabs in your shopify product description. All you need is to replace {{ product.description }} with the code below. It will separate every <h3> tag and contents after it into a tab. feel free to contact me if you want it implemented on your website for a small one time fee. `projoomexperts@gmail.com` "Shopify product des…
{% assign description = product.description | replace: '<h3', '</div><div class="tab-content"><h3' %}
<div class="prod_description">
<div class="spacer">
{{ description }}
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
jQuery(document).ready(function(){
var tabTitle = '<ul>';
jQuery('.prod_description > div.tab-content').each(function(i, item){
jQuery(this).attr('id', "tabs-" + i);
var titletext = jQuery(this).find('h3').text();
var titlelist = '<li><a href="#tabs-' + i + '">' + titletext + '</a></li>'
tabTitle += titlelist ;
});
tabTitle += '</ul>';
jQuery( tabTitle ).insertAfter('.spacer');
jQuery('.spacer').remove();
jQuery( ".prod_description" ).tabs();
})
</script>
@MottProblem
Copy link

Thanks for this!
How do i use my own .css for this?

@altanuenal
Copy link

Hello, thank you for the code. How can i change the css of the tabs?

@projoomexperts
Copy link
Author

Thanks for this!
How do i use my own .css for this?

You have to write your own css and put it in themes css file.

@megafemgroup
Copy link

I followed the instructions, but it's not working. I'm using it on debut theme

@projoomexperts
Copy link
Author

I followed the instructions, but it's not working. I'm using it on debut theme

Hi, Can you give me link of your website , So that I can check and tell you whats wrong.

@projoomexperts
Copy link
Author

I followed the instructions, but it's not working. I'm using it on debut theme

A more detailed instruction can be found here link

@nordichemp
Copy link

nordichemp commented Sep 3, 2020

I did not have the time nor the knowledge to do this so I asked Raaz to do this for me, he is quick, good teacher and really friendly individual. I highly recommend Raaz to you all 👍 I give Raaz 10/10.

I will in near future hire him to work for me again. That's a promise.

@wesdoesdev
Copy link

I followed the instructions, but it's not working. I'm using it on debut theme

How did you get this to work for you in the end? I am also using Debut

@projoomexperts
Copy link
Author

I followed the instructions, but it's not working. I'm using it on debut theme

How did you get this to work for you in the end? I am also using Debut

Hi, Can you try following more details instruction here https://projoomexperts.com/shopify/easiest-way-to-add-product-description-tabs-to-any-shopify-theme/

@wesdoesdev
Copy link

wesdoesdev commented Oct 11, 2020

Hi I have and I've tried adding it to my product.liquid file as suggested but it still doesn't work for me. I've replaced up to {{ product.description | strip_html | json }} and just {{ product.description with your provided code and neither has created tabs I'm afraid. Here's a screenshot of the code.
Screenshot 2020-10-11 at 10 48 38

@projoomexperts
Copy link
Author

Hi I have and I've tried adding it to my product.liquid file as suggested but it still doesn't work for me. I've replaced up to {{ product.description | strip_html | json }} and just {{ product.description with your provided code and neither has created tabs I'm afraid. Here's a screenshot of the code.
Screenshot 2020-10-11 at 10 48 38

Hi, Donot edit the product.liquid file for debut theme. For debut theme its inside /sections/product-template.liquid file.

@wesdoesdev
Copy link

Hi, Donot edit the product.liquid file for debut theme. For debut theme its inside /sections/product-template.liquid file.

Hello, thanks but after replacing the {{ product.description }} code within the /sections/product-template.liquid file. as suggested, this still hasn't worked for me. My site is https://marblewallpaper.co.uk/products/black-and-pink-waterproof-marble-vinyl-self-adhesive-wallpaper

@projoomexperts
Copy link
Author

@wesdoesdev
Your website has some javascript conflicts. To get the script working you need to solve them.
Screenshot_35

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment