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
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
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
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
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
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
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
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
User | Count |
---|---|
448 | |
187 | |
139 | |
61 | |
44 |