Can you tell me how to insert an image?

Highlighted
Excursionist
29 0 3

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?

0 Likes
Highlighted
Community Moderator
Community Moderator
2687 190 426

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

Nick | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
29 0 3

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

0 Likes
Highlighted
Community Moderator
Community Moderator
2687 190 426

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

Nick | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
66 2 6

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

1 Like
Highlighted
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...
0 Likes
Highlighted
Community Moderator
Community Moderator
2687 190 426

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

Nick | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes