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

Solved

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

Algebruh
Tourist
3 0 4

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 🙂 

Accepted Solution (1)

made4Uo
Shopify Partner
3840 716 1177

This is an accepted solution.

Hi @Algebruh,

 

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

 

made4Uo_0-1658538294217.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 12 (12)

made4Uo
Shopify Partner
3840 716 1177

This is an accepted solution.

Hi @Algebruh,

 

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

 

made4Uo_0-1658538294217.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Algebruh
Tourist
3 0 4

Thank you!!!

Algebruh
Tourist
3 0 4

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
Shopify Partner
3840 716 1177

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
abertini
Shopify Partner
13 0 5

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. 

 

 youtube.jpg

capitan
Visitor
1 0 1

I'm interested in the youtube video!

abertini
Shopify Partner
13 0 5
paperslate
Visitor
1 0 0

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
Explorer
73 0 10

Hi @abertini. How do you do that?

Marco
abertini
Shopify Partner
13 0 5

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

lovehuvet
Excursionist
15 0 8

please share!

abertini
Shopify Partner
13 0 5

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