Re: Adding unique class or id to a collapsible tab on product page.

Adding unique class or id to a collapsible tab on product page.

NinaLowman
Tourist
8 0 4

I created several collapsible tabs on my product template.   They all have the same class so there is no way to style them individually.   I have tried adding what I think should work to the product.json file

"e5f5939a-f28e-486a-b73b-c9f702a0aeba":{
"type": "collapsible_tab",
"class": "idtw-details",
"settings": {
"heading": "DETAILS",
"content": "<p>{{ product.metafields.my_fields.details | metafield_tag }}<\/p>",
"page": "",
"icon": "none"
}
},

I have put it above settings and within it but neither works.   

The class that is generated by shopify on the front end is this:  

<div class="product__accordion accordion">

Does anyone know how to go about adding a unique css class or id to the div referenced above? 

Thank you in advance for any help.  


Replies 5 (5)

KetanKumar
Shopify Partner
37133 3648 12061

@NinaLowman 

try this

id="icn-{{forloop.index}}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NinaLowman
Tourist
8 0 4

Hello KetanKumar,  Thank you so much for your help.  I added that but it created an error.  The code you gave me seems to be a different format than the code created by shopify.  

Am I editing the correct file?  Product.json?  

This is the code that shopify generates to display the tab on the above file - I added the "id": "details", thinking it might work but no such luck.  😞  

Is there something else I can try?  

 "e5f5939a-f28e-486a-b73b-c9f702a0aeba": {
"type": "collapsible_tab",
"id": "details",
"settings": {
"heading": "DETAILS",
"content": "<p>{{ product.metafields.my_fields.details | metafield_tag }}<\/p>",
"page": "",
"icon": "none"
}
},

KetanKumar
Shopify Partner
37133 3648 12061

@NinaLowman 

add code on html file not schema code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NinaLowman
Tourist
8 0 4

Thank you for your help - I have sorted it finally.  🙂 

Bough
Shopify Partner
3 0 0

How did you do it?