Using custom icons in store

lazarinl
Visitor
2 0 0

Hello everyone,

 

I am trying to use a custom icon on my store in Shopify. So far, I have added this icon to the assets by following the path: "Online Store" --> "Themes" --> "Edit Code" --> "Assets" --> "Add a new asset" --> then uploading my icons as .png files there. However, I am unsure how to access those icons later. On the particular place, where I could add an icon, there is an option to add one from Google Fonts by using code like for example: "<span class="material-icons"> pets </span>". I have tried to change this to "<span class="picture-name"> picture-name</span>" but it has not worked. I am using Debutify theme, however I am unsure whether this impacts the process of adding and accessing icons on the store.

 

Does anyone know how to successfully add an icon and access it for use in the store? Thank you!

Replies 3 (3)

Stefan_W
Shopify Partner
36 0 1

Hi,

Updated themes tend to use SVG icons that are stored as separate snippets. These contain the vector information (much better for speed then PNG, but limiting in options).

 

When you want to call an image that is stored in the Assets folder it is done with the tradition img html command and under source {{ 'image-name.png | asset_url }}

lazarinl
Visitor
2 0 0

Thank you, Stefan! 

 

I tried this. It seems that the image still cannot be called.

I am attaching two screenshots to this reply: one of the assets and one of the attempt to call the image. 

 

If there are no visible issues on these screenshots, the issue is likely some more complex to resolve and requires contacting the Debutify Theme support. 

 

Icon issue screenshot 1.pngIcon issue screenshot 2.png

Stefan_W
Shopify Partner
36 0 1

This is not the right way to call it, it should be "{{ 'image-name.png' | asset_url }}"