CODEWITHSUNDEEP
shopifyliquidshopify-template
Adam Scot
Adam Scot

Reputation: 1409

Call Shopify product image

I can call the URL for the image of a product with the following code

{{ product | img_url: "medium" }}

this ouputs:

//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311

When I however use this liquid code in an <img> tag like this

<img src="{{ product | img_url: "medium" }}" />

the output is:

<img src="" />

How do I correctly display the image of a product?

Upvotes: 1

Views: 19192

Answers (1)

drip
drip

Reputation: 12943

It should be:

{{ product.featured_image | img_url: '600x600' | img_tag: product.featured_image.alt }}

the same as:

<img src="{{ product.featured_image | img_url: '600x600' }}" alt="{{product.featured_image.alt}}" />

or

{{ product.images[0]| img_url: '600x600' | img_tag: product.images[0].alt }}

the same as:

<img src="{{ product.images[0] | img_url: '600x600' }}" alt="{{product.images[0].alt}}" />

both of them will work.

Don't use "medium" those are deprecated, for more information see here: https://help.shopify.com/en/themes/liquid/filters/deprecated-filters#named-size-parameters

Upvotes: 6

Related Questions