Adding tabs on product page + simple entry

Solved
omar10
Tourist
51 0 1

Tim, how would the code work with my Turbo theme ,  Can you please help me to adjust it to make it work?

0 Likes
tim
Shopify Expert
2862 118 938

omar, as I said, I has not seen the source code of Turbo. If you like, you can send me an account invite to the e-mail address below, so I can have a look and let you know whether it is easy, or may need some paid time.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Emma9
Tourist
9 0 1

Hey Tim,

Different things are not working so good for me
- I wrote 2 titles with h6 in my product description but when I preview the page, the content of each tabs is in the same one
- I still don't know how to mix the two methods of creating tabs

Yo will find atttached my HTML code

Hope you can help me

0 Likes
tim
Shopify Expert
2862 118 938

Emma, you should remove the tutorial code before adding mine. A far as I can see from your screenshot, you're putting my code inside the tab which was created with tutorial. This is wrong.

If you're starting witn unmodified theme, you search for {{ product.description }} and replace it with {% include 'tabbed-description' %}.

If you want to add more tabs, you simply add this data to the product description before feeding it to my snippet:

In your unmodified theme, you should replace {{ product.description }}  with the code similar to the snippet I added at the bottom of first post, like:

{% capture even-more-tabs %}
    {{ product.description }}
    <h6>About Us</h6>
    {{ pages['about-us'].content }}
    <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 takes you product.description, adds new header tab -- About Us, then adds content of the Page(which we want to show in this tab), then adds another tab header -- Reviews,  and then adds the code necessary for the Product reviews app, and stores it into variable even-more-tabs.

And then all this html code, including description, page content and product review <div> is fed into my snippet, which breaks it into parts, outputs tab headings and divs for each tab, adds styling and javascript to power it all up.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Emma9
Tourist
9 0 1

Tim,

I will try what you said but to explain you the reason why I did that is because the last two tabs, I don't want to write them everytime I write a product description. They are always the same no matter the product. I would like the last 2 tabs to be integrated into the product template so I would like to modify the theme. 

0 Likes
tim
Shopify Expert
2862 118 938

Absolutely -- and my post above explains exactly how to do it.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Emma9
Tourist
9 0 1

I'm sorry but I'm really a debutant into coding so I don't really understand everything you say.. I'm like a child learning how to walk and losing balance every 3 minutes.. 

I did exactly as you said but I'm not sure I did it correctly. After replacing the code of "product description", do I have to do something else? Because right now it's not working. On my preview page I just have the 2 tabs of the two <h6> titles I wrote in my product description but nothing regarding the 2 tabs coming from the 2 pages.

Or maybe I'm just turning stupid and I don't even know how to read correctly what you write. That's a possiblity!

0 Likes
tim
Shopify Expert
2862 118 938

Try moving endcapture and include lines to be above </div>

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Emma9
Tourist
9 0 1

Nop, not working.. 

0 Likes
omar10
Tourist
51 0 1

Guys, how to increase the size of the tab's font ? I tried to change the  tag <h6>  to <h3> but it brok the code and I lost the tabs so I had to change it back to <h6>, anybody tried that ? please share it. and at the moment I have my tabs looking like that  but I want it to look like this ,

 

0 Likes