Shopify themes, liquid, logos, and UX
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.
try this
id="icn-{{forloop.index}}
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"
}
},
add code on html file not schema code
Thank you for your help - I have sorted it finally. 🙂
How did you do it?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024