Adding an icon PNG into the collapsible row in a product.json in the Dawn theme

[Algebruh]

Hiya, 

So I'm having a bit of difficulty trying to add a new icon into the list of available icons for a collapsible row in the product template in the Dawn theme. I have minimal coding experience, but google got me about half way, but my problem is that in the code of the theme, I can't figure our where the icons for the collapsible menu are. Any help at all would be appreciated 🙂 

[made4Uo · Accepted solution]

Hi @Algebruh,

It is in the icon-accordian.liquid under the Snippet folder. 

[Algebruh]

Thank you!!!

[Algebruh]

Okay, so I've located the code, but apparently this is far more complicated than I had initially thought. I cannot figure out how to add a new icon into this list. I have my icon in both a PNG and SVG file, but for the life of me I cannot figure out which file type to use nor how to go about adding it. Please, please, please can anyone help me out

[made4Uo]

Hi @Algebruh,

You have to add it in the snippet.liquid, which is the icon-accordian.liquid. The second place is the schema, at the main-product.liquid

[abertini]

Hi, I know how to do this.  Its actually very easy, just a couple of steps. I added a Youtube video icon to  my collapsible menu. Let me know if you still need. 

 

[capitan]

I'm interested in the youtube video!

[abertini]

https://youtu.be/sj42pjgpEmc?t=635

[paperslate]

I add my svg path in icon-accordion.liquid. Then value and label (3 times) it in the main-product.liquid but the icon doesn't appear in the scrolling menu. So I tried to delete for exemple every label and value of "apple"/"Apple", and effectively Apple still appears in the scrolling menu.
How could it be possible?

[1989streetwear]

Hi @abertini. How do you do that?

[abertini]

Hi, I just replied below to Lovehuvet with all the info 🙂

[lovehuvet]

please share!

[abertini]

hi, everything you need to know how to do this can be learnt from this video here: https://youtu.be/sj42pjgpEmc?t=635

The important part starts at timestamp, 10:35.  The most important part is creating the SVG icon to the correct size. If you don't size the SVG correctly the graphic will not display.  

Here's a video to create SVG's. https://www.youtube.com/watch?v=cACcJBsEVII

My Website.

I created several custom icons, you can go to my mattress website and click on any caravan mattress product and scroll down the product page, you will see my custom icons.

https://mybespokemattress.com/collections/caravan-mattresses-comfort-for-your-mobile-adventures