Add different content to product tabs

Highlighted
New Member
6 0 0

Hi,

I would really appreciate someone's help on this.

I added tabs to each of my products and they look great. But the problem that I am running into is that I want the information in each tab to be different for each product, but right now they are all coming up with the same content, except for the "info", tab.

I installed the tabs using html (https://docs.shopify.com/themes/customization/products/add-tabs-to-product-descriptions) it's not with an app or anything. 

Can you guys please help as purchasing an app is just not feasable for me right now.

I really hope you guys can help me! 

Here is the store and password to get in: https://fitnotskinnyteatox.myshopify.com/password

Password: fadewm

Thanks everyone :)

Sam

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
25 0 3

Hi Sam,

That is great that you were able to get the coding working up to this point!

As the document states, however, "because all themes are different, no single method will serve all themes perfectly" so some tweaking to the code may be necessary for the product tabs to work properly with your theme.

Since this is an unsupported customization the best place to get help implementing this coding would be through the Shopify Expert Designers list:

https://experts.shopify.com/designers

That list will help you connect with a multitude of web designers who are experts in Shopify themes and coding :)

Contact as many as you like with your issue, and they will be able to reply with a quote for the work needed to install the product tabs so that they work for your theme :)

I hope this helps Sam

Cheers,

Sean

1 Like
Highlighted
Shopify Partner
57 0 20

Hey Sam,

I just checked out the product pages where your tabs are located. I had the same problem with them being strictly static content across the board as well. I developed a custom solution (it's not complicated) that works better for me, so If you still need help, let me know!

Blake

Shopify Plus Developer | Get in touch: blakewenloe@yahoo.com
1 Like
Highlighted
New Member
6 0 0
Hi Sean, Thanks for your reply. I'll have a look into this, hopefully I'll find an expert who can do it for me, Thanks again :) Sam
0 Likes
Highlighted
New Member
6 0 0

Hi Blake,

That would be amazing, I would realy appreciate any help you could offer on this. I have been trying for weeks now and I can't let it go! :)

Look forward to your reply,

Kind regards,

Sam

0 Likes
Highlighted
Shopify Partner
57 0 20

No problem at all. If you can set me up with a temporary staff account I can go in and set it up for you and then give you instructions for filling in the tabs. Otherwise, I can send you an email with step-by-step instructions. Let me know what works for you!

Blake

Shopify Plus Developer | Get in touch: blakewenloe@yahoo.com
1 Like
Highlighted
New Member
6 0 0

Hi Blake,

I can set up a staff account for you no problem, I'll just need your email address but if it's easier for you, this is my email address: fitnotskinnyteatox@gmail.com so you can send on instructions, I don't mind which you chose to do.

You are an absolute lifesaver Blake!

Thank you so much :) Sam

0 Likes
Highlighted
Shopify Staff
Shopify Staff
45 0 11

Hi there!

Looks like you are well on your way to getting your solution. Just wanted to jump in and post a solution on here in case others run into this in future as well.

One way to get different tab content on each product page is to the follow the steps in the doc (check for jQuery, add JS at the bottom, and add CSS) but instead of placing your HTML for the tabs directly in product.liquid in place of {{ product.description }}, you can place the code directly in the text editor of your product page by clicking on the show HTML button (<>).

The code in each product page would look something like this:

  <ul class="tabs">
    <li><a href="#tab-1">Info</a></li>
    <li><a href="#tab-2">Ingredients</a></li>
    <li><a href="#tab-3">What you will recieve</a></li>
    <li><a href="#tab-4">Serving Suggestion</a></li>
    <li><a href="#tab-5">Delivery</a></li>
  </ul>
  <div id="tab-1">
  Unique Tab 1 Content Goes Here
  </div>
  <div id="tab-2">
  Unique Tab 2 Content Goes Here
  </div>
  <div id="tab-3">
  Unique Tab 3 Content Goes Here
  </div>
  <div id="tab-4">          
  Unique Tab 4 Content Goes Here
  </div>
  <div id="tab-5">
  Unique Tab 5 Content Goes Here
  </div>

The only limitation is that you cannot use liquid tags in the product description text editor.

All the best!
Justin

1 Like
Highlighted
Shopify Expert
64 0 16

Hi Sam,

There's an easier (and free) way to install product tabs.  I can give you hand implementing them (also free) if you're interested.  Drop me a line.

Cheers!
~ Michael

 

ShopaFree.me ~ The World's Only Free Shopify Setup Service.
0 Likes
Highlighted
New Member
3 0 0

Hi Blake,

I'm facing the same issue on this matter, would you mind to email the step-by-step guideline? Thanks in advance..

My email address is: modespade@gmail.com

0 Likes