All things Shopify and commerce
Hi,
I'm trying to add an image in the product template.
What is the best way to add this code?
Something like <img src="relative image path"....?
Or is there a better way?
Hi @csimacc,
Nick here from Shopify.
I spoke to our themes support team about this. They said it is possible and the cleanest way to do it is via liquid. For instance, if you upload your image in Settings -> Files in your admin and then call it from your code. The Shopify team created a guide explaining the syntax behind that which you can read here.
For example, if you have uploaded an image called “image.png”, and is 2048px by 2048px then you can display it like the following:
<img src="{{ 'image.png' | file_img_url: '2048x2048' }}" />
You can also find more information on the size parameters of the images here.
Should you not feel comfortable doing making these changes for any reason, just to note this is an unsupported tutorial from Shopify and your best bet would be to reach out to a Shopify expert for assistance as a small task job.
Hopefully, this helps and answers your question!
All the best, Nick
To learn more visit the Shopify Help Center or the Community Blog.
I tried this code:
<img src="{{ 'payment_icons.png' | https://cdn.shopify.com/s/files/1/0058/4879/3152/files/payment_icons.png?2150 }}" />
And also
<img src="{{ 'payment_icons.png' | https://cdn.shopify.com/s/files/1/0058/4879/3152/files/payment_icons.png?2150: '380x380' }}" /> (original image size is 386x33)
I get this error: Liquid syntax error: Unexpected character / in "{{ 'payment_icons.png' | https://cdn.shopify.com/s/files/1/0058/4879/3152/files/payment_icons.png?2150: '380x380' }}"
Ah ok, if you are having trouble with this, I'd suggest to reverting or removing the code and maybe asking a Shopify Expert for assistance with it. It is an unsupported tutorial from Shopify, so an Expert as a small task would be the most appropriate next step for you. You can see the small task Expert list here.
To learn more visit the Shopify Help Center or the Community Blog.
try this -
<img src="{{ 'payment_icons.png' | file_img_url: '386x33' }}" />
or if static -
<img src="https://cdn.shopify.com/s/files/1/0058/4879/3152/files/payment_icons.png" />
Hi @nuclceusmagnet,
As I mentioned above if you are having trouble with this, I'd suggest asking a Shopify Expert for assistance with it. An Expert would be able to place this for you in the right place s you'd like. You can see the Experts for adding or changing custom code here.
To learn more visit the Shopify Help Center or the Community Blog.
To all who are asking about the adding of an image, this can be done in the theme section by adding a "Custom Liquid" section in the template. From there you can add the img tag. Like this:
<img src="https://logodix.com/logo/1058190.jpg" />
I just tried your suggested code <img src="{{ 'glow.png' | assets_url: '60x60' }}" />
It showed only the space for an image instead of actual image. Could you please guide me to resolve this issue?
Here are the steps to solve it:
Firstly you should upload image in theme -> Edit code -> Assets. Then you should put below code to liquid file wherever you wanted to add.
{{ 'demo.png' | asset_url | img_tag: 'image' }}
You should replace demo.png with the image which you will have uploaded to Assets.
Thanks.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024