Adding tabs on product page + simple entry

Highlighted
Shopify Partner
2522 25 519

There are several approaches to creating tabs on the product page. One of them is covered in this tutorial and  discussed in this forum several times. When store owners implement this code in their shops, the obvious next question is "how do I add information to the tabs?".

In this post I will try to offer one of the possible solutions.

The idea is to enter all information in the product description field and then cut it into parts with Heading 6 headers. The code below will split the description field, use these <h6> headings as the tab headers and text between them as tab contents.

CODE MODIFICATION

0. Make a theme copy to serve as a backup by clicking the Actions button and selecting "Duplicate theme".This snippet meant as a replacement to all the modifications suggested in the tutorial, which means you have to undo them before proceeding (if you've done them already). Do it after you've made a backup copy.

1. Create a new snippet called tabbed-description and use this code (it should include the code from the tutorial above, use the gist link below for complete code):

{% comment %}
	if combine_pretext is false, the text before the first <H6> will be shown above all tabs, otherwise added to the first tab
{% endcomment %}
{% assign combine_pretext = false %}

{% assign description = tabbed-description | default: product.description %}
{% if description contains "<h6>" %}
	{% assign tab_heads = '' %}
	{% assign tab_texts = '' %}
	{% assign pretext = '' %}

	{% assign chunks = description | strip | split: "<h6>" %}
	{% for c in chunks %}
		{% if c contains "</h6>" %}
			{% assign chunk = c | split: "</h6>" %}
			{% assign tab_heads = tab_heads | append: ",," | append: chunk.first %}
			{% assign tab_texts = tab_texts | append: ",," %}
			{% if pretext != blank  and combine_pretext %}
				{% assign tab_texts = tab_texts | append: pretext | append: "<br>" %}
				{% assign pretext = '' %}
			{% endif %}
			{% assign tab_texts = tab_texts | append: chunk.last  %}
		{% elsif forloop.first %}
			{% assign pretext =  c %}
		{% endif %}
	{% endfor %}

	{% assign tab_heads = tab_heads | remove_first: ",," | split: ",," %}
	{% assign tab_texts = tab_texts | remove_first: ",," | split: ",," %}

	{% assign index =  1  %}
	<div>
      {% if pretext != blank and combine_pretext == false %}
      <span class=pretext>{{ pretext }}</span>
      {% endif %}
	  <ul class="tabs">
	  	{% for head in tab_heads %}
	  		<li><a href="#tab-{{- index -}}">{{ head }}</a></li>
		 	{% assign index =  index | plus: 1  %}
	  	{% endfor %}
	  </ul>
	  {% assign index =  1  %}
	  {% for text in tab_texts %}
	  	<div id="tab-{{- index -}}">{{ text }}</div>
	 	{% assign index =  index | plus: 1  %}
	  {% endfor %}
  	</div>
	
 <script>
   document.addEventListener( 'DOMContentLoaded', function () {
     ... content of the SCRIPT section of the tutorial ...
   }, false );
 </script>
 <style>
  ... content of the STYLE section of the tutorial ...
 </style>

{% else %}
	{{ description }}
{% endif %}

Full code can be found in this gist 

2. Open your product template (or section), find this line 

{{ product.description }}

and replace it with this line:

{% include 'tabbed-description' %}

3. Done

EDITING PRODUCT DESCRIPTIONS

The code will pass unmodified product description if it does not have <h6> tags (Heading 6 elements). Go to your  products and try to add some lines formatted as Heading 6 . Example HTML code:

<p>This site does not sell jewellery!</p>
<h6>Description</h6>
<p>This designer sterling silver ring features a <strong>Natural Amethyst</strong> gemstone of 0.35 carat and the area around the stone is accented with gold plating. The ring is oxidised to give it appealing dark colour.</p>
<h6>Where to buy</h6>
<p>This beautiful ring can be purchased from <a href="https://trezorojewellery.com.au/products/amazing-surprise-ring-oxidized-gold-plated-sterling-silver-..." target="_blank" rel="noopener noreferrer">Trezoro Jewellery</a> </p>
<h6>Shipping</h6>
<p>The nice guys at Trezoro offer free shipping in Australia and New Zealand and cheap shipping to other countries.</p>
<h6>Packaging</h6>
The ring will be delivered in a beautiful gift package:
<div style="text-align: center;"><img alt="" src="https://cdn.shopify.com/s/files/1/1082/4740/products/RB01X1_Gift_Box_1_small.jpg?v=1457016659" /></div>

See the screenshot below how it looks in the product properties in Admin and follow this link to see how it all works together in my test shop. 

BUT I NEED MORE TABS!

Now if you want to add more tabs with content you are not able to type into your product description field (Product reviews is the best candidate here), there is a simple trick (look how it works here):

{% capture more-tabs %}
	{{product.description }}
    <h6>Reviews</h6>
	    <div id="shopify-product-reviews" 
	    	 data-id="{{product.id}}"
	    	 >
	    	 	{{ product.metafields.spr.reviews }}
	 	</div>
{% endcapture %}
{% include 'tabbed-description' with more-tabs %}

In the same way you can pull in a Page content too:

{% capture even-more-tabs %}
    <h6>About Us</h6>
    {{ pages['about-us'].content }}
	{{ product.description }}
    <h6>Reviews</h6>
	    <div id="shopify-product-reviews" 
	    	 data-id="{{product.id}}"
	    	 >
	    	 	{{ product.metafields.spr.reviews }}
	 	</div>
{% endcapture %}
{% include 'tabbed-description' with even-more-tabs %}

This code should be put in your product template(section) code in that place where {{ product.description }} initially was.

Warning: If you add more tabs like this but your product desription has no <h6> elements, its content will be added to one of the tabs you specifically create here.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
6 Likes
Tourist
9 0 1

Hello Tim,

You replied to my last post with a link to this page. Thanks a lot. Indeed what you wrote interest me a lot.

I would need to combine your methode, and the one from Shoppify help support.

As I said previously, I need to import my product from a CSV file so your method would be perfect if in my "body HTML" column I just need to write my <h6>description</h6> (the description) and then <h6>Delivery</h6> (the delivery conditions). Do you think it would work? Will I have my two tabs already filled in by importing my CSV file?

Then I need to follow the Shopify method for the 2 other tabs because they are always the same. So by having them coded in the HTML template, I won't need to write them over and over. 

Do you think you could write my a code to combine the 4 times together?

Look what I have for now when I combine the two methods (Yes sorry it's in french). Description and delivery are mixed.

Thanks a lot for your help

 

0 Likes
Tourist
24 0 2

Hi!

I followed every steps then i use this description to test it out.

<p>This site does not sell jewellery!</p>
<h6>Description</h6>
<p>This designer sterling silver ring features a <strong>Natural Amethyst</strong> gemstone of 0.35 carat and the area around the stone is accented with gold plating. The ring is oxidised to give it appealing dark colour.</p>
<h6>Where to buy</h6>
<p>This beautiful ring can be purchased from <a href="https://trezorojewellery.com.au/products/amazing-surprise-ring-oxidized-gold-plated-sterling-silver-..." target="_blank" rel="noopener noreferrer">Trezoro Jewellery</a> </p>
<h6>Shipping</h6>
<p>The nice guys at Trezoro offer free shipping in Australia and New Zealand and cheap shipping to other countries.</p>
<h6>Packaging</h6>
The ring will be delivered in a beautiful gift package:
<div style="text-align: center;"><img alt="" src="https://cdn.shopify.com/s/files/1/1082/4740/products/RB01X1_Gift_Box_1_small.jpg?v=1457016659" /></div>

However, all the content feed into only <h6>Description</h6> tab 

and the rest of the h6 tabs are blank. 

Please do let me know if i'm missing any part from this instruction.

Thanks!

0 Likes
New Member
21 0 0

Absolutely perfect, worked like a charm!

 

Few questions:

How can I embed reviews? 

Bulleted lists doesn't seem to work anymore. Any solution for that? 

0 Likes
Shopify Partner
2522 25 519

Earl, bullets work for me: https://mod-a-boundless.myshopify.com/products/actinotus-helianthi-pendant-sterling-silver

There is nothing in the code to break it, except if you put an <h6> in the middle of the list, then it may break, but... Share the link to the test product?

Kindy, it'd be nice if you can share a link to the test product too, otherwise it's pretty difficult to tell. Note, that this code does not add to the code from the tutorial, but replaces it.

Earl, Emma,  absolutely, code can be modified to add some tabs which are not derived from product description,for example, you can concatenate some premade html at the beginning or at the end of the product description, and then feed it to my code...

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
21 0 0

Hey Tim,

That's my bad! I was placing H6 in the middle of the list. The bullets work now.

Also, I'm a big newbie when it comes to coding. Do you know what kind of code, and where in the description I would need to place that code, in order for Product Reviews App to display reviews in one of the tabs?

Thank you for this handy tool btw.

0 Likes
Shopify Partner
2522 25 519

Emma, Earl

I've updated the code above and added an example how to pull your product reviews and Page content  into additional tabs.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Tourist
24 0 2

It works now! I was missing this part here

 <script>
   document.addEventListener( 'DOMContentLoaded', function () {
     ... content of the SCRIPT section of the tutorial ...
   }, false );
 </script>

I would like to know, can i replace the <h6> with <h2>?

It's because i got hundreds of product with <h2> content which i created them myself previously

For example, <h2>How to use</h2> <h2>Main ingredients</h2> <h2>Options</h2>

So i wonder if i change all <h6> code to <h2>, all my products i created previously will automatically feed into tabs, so i don't need to edit them to <h6> 1 by 1 again.

Thanks tim!

0 Likes
Shopify Partner
2522 25 519

Good!.

You can definitely modify the code to look for <h2> and </h2> instead of <h6> (2 places) and </h6> (one place).  The idea behind choosing H6 is to repurpose the markup which is less likely to be used (do not remember ever seeing h6 in real life ;)

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
21 0 0

Hey Tim,

Silly question, but the 2 codes you gave for reviews and page, where should we place that in the general code? 

0 Likes