How do I insert an image in a product template?

How do I insert an image in a product template?

csimacc
Excursionist
29 0 4

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?

Replies 10 (10)

Nick
Shopify Staff (Retired)
4531 434 1026

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.

csimacc
Excursionist
29 0 4

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' }}"

Nick
Shopify Staff (Retired)
4531 434 1026

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.

kpvw
Shopify Partner
96 3 19

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" /> 

marthedesigner
Shopify Partner
18 0 1

hey! thanks!

☁️ Email Marketing, SEO and Ecommerce + Klaviyo and Shopify Certified Partner 落
nuclceusmagnet
New Member
4 0 0
Help! I do not know where to place this <img src=“image”... I tried placing it right above </body> and the image was right under footer... I want the image place at the middle...
Nick
Shopify Staff (Retired)
4531 434 1026

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.

darincardin
Visitor
1 0 2

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" />

Mujadid
Shopify Partner
2 0 0

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?

MRamzan
Shopify Partner
183 3 26

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.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112