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?

[LukahEurope]

If you are using Craft Theme just lime me, it works little bit different. icon-accordion.liquid has the code to wrap the  requested icon file from uploaded inline assets svg file.

First upload your svg file with the name format "icon-" + your icon file name in all lover case. Example icon-myicon.svg.

Second in the main-product.liquid find collapsible_tab or collapsible_row. under there you will see options. Similar to below:

"options": [
{
"value": "none",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},

At an appropriate place add your icon option. Give next available options_NUMBER. value shall be the same with your uploaded icon name.

Example:

{
"value": "myicon",
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__45.label"
},

Open your default language schema. Mine is en.default.schema.json. Find option blocks of collapsible_tab or collapsable_row and add your option label there.

Example:

"options__45": {
"label": "My Icon"
}

In the list it will look like My Icon and will find icon-myicon.svg file under assets and render it and show it.

It worked fine with me.

[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