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

Store Design
1

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”: “

{{ 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:

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.

2

@NinaLowman

try this

id="icn-{{forloop.index}}
3

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. :disappointed_face:

Is there something else I can try?

“e5f5939a-f28e-486a-b73b-c9f702a0aeba”: {
“type”: “collapsible_tab”,
“id”: “details”,
“settings”: {
“heading”: “DETAILS”,
“content”: “

{{ product.metafields.my_fields.details | metafield_tag }}</p>”,
“page”: “”,
“icon”: “none”
}
},

4

@NinaLowman

add code on html file not schema code

5

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

6

How did you do it?