Adding tabs on product page + simple entry

Solved
tim
Shopify Expert
3040 170 1094

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.

My post solved your problem? Like it!
Accepted Solution (1)

Accepted Solutions
tim
Shopify Expert
3040 170 1094

This is an accepted solution.

Not quite an accordion -- you would need to change HTML to convert to accordion on mobile and is more complex overall, but would still  look better -- updated the GIST with new code

 

Would convert to something like this as soon as tab headers do not fit on one line:

Untitled.jpeg

My post solved your problem? Like it!

View solution in original post

Replies 93 (93)
Emma9
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

 

seokindergarten
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!

Earl
Tourist
21 0 2

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? 

tim
Shopify Expert
3040 170 1094

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...

My post solved your problem? Like it!
Earl
Tourist
21 0 2

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.

tim
Shopify Expert
3040 170 1094

Emma, Earl

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

 

My post solved your problem? Like it!
seokindergarten
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!

tim
Shopify Expert
3040 170 1094

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 😉

My post solved your problem? Like it!
Earl
Tourist
21 0 2

Hey Tim,

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

seokindergarten
Tourist
24 0 2

Noted!

Guess i will stick to <h6> tab instead 🙂 

Since <h2> tag would be better use elsewhere.

You just save my $5 each month because i was thinking to use an app for it already.

I will apply it to my actual theme now and let you know if i encounter anything again (Hopefully not) ^^"

Thanks!

tim
Shopify Expert
3040 170 1094

seokindy, to avoid changing it all manually, you can export your products, do a search/replace in Sheets and import back overriding existing products.

Earl, I'd say it's the best to put it all together instead of the {{ product.description }} in the initial theme code.

My post solved your problem? Like it!
Earl
Tourist
21 0 2

Hmm, yea I'm placing all the whole code, including the review code, in tabbed-description. I'm adding the "review" code right before the "style" part of the code (in the middle of tabbed-description). I get the following error.

Liquid error: Memory limits exceeded

 

Do you have an email where I can quickly show yo uthe website?

tim
Shopify Expert
3040 170 1094

Well, my e-mail is right below each one of my messages 🙂 

Do you put that last piece of code inside  the tabbed-description.liquid Snippet?

My post solved your problem? Like it!
seokindergarten
Tourist
24 0 2

Thanks for the tips! I tried export and import. It's more convenient to edit massive products now 🙂

Btw, is it possible to put a content before tabs. For example, 

https://www.seoulcheap.com/products/apieu-all-clean-remover-cara

It seems that the content without <h6> which i created for the start, also feed into the "capacity" tab. 

Here's the code for my description

<p>A'PIEU All Clean Remover Cara is a mascara makeup remover that helps completely remove every strand of eyelashes.</p>
<h6>Capacity</h6>
<p>8g</p>

Thanks 😄

omar10
Tourist
52 0 2

Thank you very much for sharing that however, I'm using the Turbo theme but when I wanted to search for the {{ product.description }} I couldn't find it! Is there any update for that solution ? 

tim
Shopify Expert
3040 170 1094

Omar, I have never seen the sources of the Turbo, but suspect it may be more difficult to adapt this solution for that theme.

seokindergarten -- yes, this part of description I am extracting as pretext, you may arrange to not append it to the first tab as I do, but output before the tab headers.

My post solved your problem? Like it!
omar10
Tourist
52 0 2

Thanks Tim for your comment, I'm really frustrated about that though! anybody tried to implement that on the Turbo theme?  as I don't like squeeze all the product contents in one tab, it doesn’t  look professional that way.

tim
Shopify Expert
3040 170 1094

seokindergarten,

I updated the code in the first post to cater for your request. Pay attention to the comment at the top.

 

My post solved your problem? Like it!
seokindergarten
Tourist
24 0 2

It works! I replaced the code following the gist file and i get what i was looking for.

Thanks for replying my email and helping me solve the problem within one day 🙂