-
-
Save projoomexperts/8888ad587081d9d9b3b1f380739e1b69 to your computer and use it in GitHub Desktop.
{% 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> |
I followed the instructions, but it's not working. I'm using it on debut theme
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.
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
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.
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
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/
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.
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.
Hi, Donot edit the product.liquid file for debut theme. For debut theme its inside /sections/product-template.liquid file.
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
@wesdoesdev
Your website has some javascript conflicts. To get the script working you need to solve them.
You have to write your own css and put it in themes css file.