Adding tabs on product page + simple entry

Solved
Find-Art-Co
Excursionist
16 0 15

Thank you very much Tim.  Your help it's greatly appreciated!

0 Likes
Carlos6
Shopify Partner
31 0 33

Here is how to do it step by step in a video

 

MayurBaldha
New Member
4 0 0

hi Tim, thanks for your solution. But i would like one more feature if you can tell me. in mobile your tabs shows horizontal, but description shows below headings of all tabs. what should i do to open description below related tab & other tabs will be just below that description

0 Likes
MayurBaldha
New Member
4 0 0

How to get accordion view in this code! i am not coder..is there anyway you can suggest?

0 Likes
Glad2bee
Tourist
3 0 0

Thank you so much! I have absolutely no coding experience, was a bit daunted about editing code but followed your instructions to the tee and had my test product done in under 10 mins. Delighted with myself!...and you of course

0 Likes

Hi Tim, thanks so much for this! It's looking great on desktop but on mobile it's a bit messy due to my 4 tabs. Is there any code I can add to make the tabs stack on mobile like below?

Screenshot 2019-11-06 at 12.21.15.png

 

Appreciate your help!

0 Likes
tim
Shopify Expert
2926 143 1021

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

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!

Thanks Tim, it's looking great. Really appreciate your help!

0 Likes
lashalure
New Member
1 0 0

Hi Tim! 

I implemented your code and it worked great! Thanks for the help :)

Would love to learn how to change the mobile version to an accordion

0 Likes
JosephO
Tourist
9 0 1

Hi @tim since you made this great tutorial, I see back in 2017 and people are still using it in 2020, can you help me to integrate Kiwi Size Chart in one tab, but to show only in some collection? Thanks. 

Somehow in here:

{% 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 %}

 

0 Likes