Can you tell me how to insert an image?

Tourist
22 0 0

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
Shopify Staff
Shopify Staff
1905 108 236

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 | Social Care @ 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
Tourist
22 0 0

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
Shopify Staff
Shopify Staff
1905 108 236

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 | Social Care @ 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
Shopify Partner
12 0 2

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