How do I insert an image in a product template?

[csimacc]

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?

[Nick]

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

[csimacc]

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]

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. 

[kpvw]

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]

hey! thanks!

[nuclceusmagnet]

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]

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. 

[darincardin]

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]

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]

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.

[ryanb819z]

Okay everyone...I spent some time trying to figure this out for Dawn 2.0 and the instructions here didn't work or weren't clear enough. Then I found out that there need to be edits to the .json *and* to liquid files in order to do this. Forget all that.

You can add a Custom Liquid section within the Shopify theme editor. Do that, and then replace what you need to in the below code. You can get your image URL from your Shopify admin within Content -> Files -> click the copy link icon next to your image name.

Now that you have that, insert this in a Custom Liquid section into your theme editor, and make the adjustments (your URL, size you want it, etc.)

<div style="text-align: center;">

  <img src="YOUR IMAGE URL" alt="IMAGE DESCRIPTION" style="max-width: 200px; height: auto;" />

</div>

You can adjust the width and height up there to suit yourself. I spent well over an hour searching for answers and talking to Shopify (who also didn't have an uncomplicated answer). I figured this out after the fact in under 5 minutes as soon as I noticed a Custom Liquid section in the theme editor. Enjoy.