Canopy Theme Icons

Canopy Theme Icons

1 0 0

Hi all. First time posting so excuse me if I'm not hitting normal community ettiquette.

Where is the icon library for the Scrolling Banner located in Canopy's code? I searched through Snippets but couldn't find it. I found the generic icon .liquid objects for wider theme use, but can't find the location which contains icons such as "Award" "Box" "Briefcase"... etc. I want to add more icons to this list. 


Replies 3 (3)

Shopify Partner
9586 1199 1540

@slickfish - can you share the page link where you have these icons? 

Support me | To build shopify pages use pagefly | Contact me - , My timezone is GMT+5:30.
Shopify Partner
1 0 0

Hey @slickfish . Also new here, but I've done some digging in Canopy (v 6.0.1) as we use it ourselves.


The icons are  (award, box, briefcase) in snippets/icon.liquid macro which renders them as SVGs. First line of that macro opens the <svg> tag, the long IF statement in that macro conditionally renders the icon "body" and the final line of the macro closes the SVG with </svg>. No more magic there.


So I think to add your own icons you'll need to convert them into SVGs, then add their "body"  (curves/objects) to the conditional rendering in snippets/icon.liquid. If you also want to make them available in Theme Editor, then include the newly added icons in options for relevant sections or blocks. 


Check how sections/faq.liquid works. It has simple code so it's a good starting point.  Line 54 renders the icon for given FAQ section based on what option is selected in block.settings.icon. The Liquid statement {% render 'icon', icon: block.settings.icon ... %} is the call to to snippets/icon.liquid.  The icons available for selection in Theme Editor are then listed in the options array starting on line 184. 




Shopify Partner
436 56 78

Hi @slickfish,

You can try to find it at 'icons-with-text.liquid' file. Or send me the file code, I will check it for you

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store?