Issue

Is it possible to call or get particular product image in shopify liquid file?

I mean is it possible to get a particular image through a handle or id. Does liquid have a filter tag for that purpose.

With asset url, this is possible.

{{ 'my-image.png' | asset_url }}

But I just wanted to know whether this is possible with product images.

Something like this: {{ product.images | product_img_url: 'red-xl-vertical-product' }}

I hope you got it.

Rather than looping and displaying all the product images I have a used case where a particular product image has to be called on the product page.

Is there an API for getting a particular product image by an id or a handle rather than image index in the product.liquid file?

Or can someone suggest alternatives other than storing them in the assets folder?

This is what I've tried. But not working! {{ product.images | where: 'id', '1785281087' | img_url }}

Solution

You're correct! Just a slight change will make it working.

What you missed was you forgot to assign it to a variable in order for filter where to work!

This can be achieved using the following trick:

first you need to assign the product media to a variable

{% assign images = product.media | where: "alt", "primary-image" %}

then you can get the img_tag

<div>
  {{ images[0] | img_tag }}
</div>

Here is the complete snippet.

{% assign images = product.media | where: "alt", "main-image" %}

<div>
  {{ images[0] | img_tag }}
</div>

Answered By - Speed Code

Answer Checked By - David Goodson (PHPFixing Volunteer)