How to display dynamic product attributes with icons on Dawn theme?

Hi! I’ve been trying to figure this out for a while now so hopefully someone here can help me.

I sells one of one items, I would like to add icons with text to display the material, shipping & returns and care instructions. The shipping & returns and care instructions will stay the same for each item but the material will change.

I’ve added metafields to each product using the meta guru add on in Shopify, I then exported the metafields to my Shopify and it says they successfully exported. After, I asked chatGPT to help me add the metafield to my code so that it will automatically adjust the material.

here’s the code snippet chat gpt told me to add on my products page to make sure the

“type”: “icon-with-text”,

“settings”: {

“layout”: “vertical”,

“icon_1”: “shirt”,

“heading_1”: “Material”,

“icon_2”: “truck”,

“heading_2”: “Shipping + Returns”,

“icon_3”: “washing”,

“heading_3”: “Wash Recommendation”,

“text_1”: “{{ product.metafields.material_tag.value.value }}”,

“text_1_hidden”: true

}

}

in addition, I would need to add “text_2” and “text_3” to show the other information but that will stay the same so shouldn’t be difficult for me… my real struggle is figuring out how to add the metafields that I built in meta guru to reflect to my Shopify products so that when I code it will display the material.. (which changes for each product)

here is a link to a demo store that reflects what I’m aiming for

https://themes.shopify.com/themes/dawn/styles/default/preview

if you click on different products you can see that the material and even dimensions update accordingly… how do they do that?? please help

You would need to do this with Metafields and Javascript. On the front end when a customer clicks one of your product variants, you would need javascript to execute to find that product variants metafields and then change the necessary section of the page with the content.