Would love to have these chilli icons after the product title on my webstore

Hi everyone

I am trying to find a way to add these icons to my shopify store product pages, each hot sauce will have a different scale and I was wondering if there is a way to do this.

Thank you

Yeah you can do this with a metafield or just tags as well on products. This depends though if you have different variants for a single sauce you can use variant metafield else you can use product Metafield or just a tag with that scale number which will be different for different products or variants depending you have variants.

Then use a bit of liquid code to run a for loop the number of times of the scale value and render the chilli icon.

Yes we have 7 sauces that each of them have different types of heat. What is the easiest way to implement these chilli icons to each page?

Thank you so much

As mentioned before we need metafields for this. So we need to create a metafield of type number. Then populate the field on all the products with the number equal to the heat scale of that product.

This is all in the backend admin.

The second part is displaying the icons equal to the number provided to that product with code on the product page.