Home > Blockchain >  How to implement images in Shopify source code?
How to implement images in Shopify source code?

Time:05-25

I hope to get help. I worked on my theme in vscode and implemented one new section witch is super simple (just some text and an icon), it works totally fine (shopify cli).

Now I wonted to implement it on my Live theme and the icons are broken.

here my code:

enter image description here

Hope I someone can point my in the right direction. I am not a programmer but have some understanding of programming :)

CodePudding user response:

You can use Liquid's asset_img_url URL filter:

<img src="{{ 'tick.png' | asset_img_url: 'master' }}">

This would render something like this (the URL might differ):

<img src="//cdn.shopify.com/s/files/1/0000/0001/t/1/assets/tick.png">

CodePudding user response:

To include pictures you cannot use a local path. You need to use the asset_img_url media filter. So your code should look like

<img  src="{{'tick.png' | asset_img_url: 'original'}}" width="20" height="20" loading="lazy"/>
  • Related