Calling product images

New Member
15 0 0

Can anyone tell me how can I call multiple product images at once in a template? 

Thank you in advance.

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
29 0 2

HI there Rajat,

Glad to help out with your question! What you would be looking to do is use our Liquid language to iterate through the images on the product. We have a helpful guide on Liquid Tags available that should get you right as rain and the object you'd be looking to iterate through is the Product.Images Liquid Object reference!

Hope that helps :)

You can always reach out to us on phone/email/chat as well!

1 Like
New Member
15 0 0

Thank you for your help Jeff that was exactly what I was looking for. 

Also if my product has several images and I want to display one featured images and 4 more images. Then I have to call these images one by one, right?

I guess it would be something like this:

<img src="{{ product.images[1] | product_img_url: 'medium' }}"/>

Just can you tell me what does medium do here? I know I should be looking to liquid reference for this, but I just find it more understanding if anyone explains it to me.

 

Thank you so much for your time and help. 

0 Likes
Shopify Expert
9778 86 1526

You can do this to loop over product images:

{% for image in product.images %}
   <img src="{{ image.src | product_img_url: '500x' }}">
{% endfor %}

See the docs: 
https://help.shopify.com/themes/liquid/objects/product#product-images

If you need to only loop over the first four:

{% for image in product.images limit:4 %}
   <img src="{{ image.src | product_img_url: '500x' }}">
{% endfor %}

Medium in your example denotes the size of the image returned. The named sizes are deprecated so you'll want to use the new format instead.
See the docs:
https://help.shopify.com/themes/liquid/filters/url-filters#size-parameters 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
New Member
15 0 0

Hey Jason,

Thanks for your quick reply.

It helped me a lot. Also can we call images from the second index of the array?

0 Likes
Shopify Expert
9778 86 1526

Sure can. You'd just use the same notation as you had earlier if you wanted to get a very specific image from the images array.

product.images[1]

or:

{% for image in product.images offset:1 limit:1 %}
   <img src="{{ image.src | product_img_url: '500x' }}">
{% endfor %}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
15 0 0

Yeah we could do it by "product.images[index]" but that would be clumsy.

I think offset is great. Thank you very much for the quick reply. I appreciate your help.

0 Likes
New Member
2 0 0
Hi Jason,&nbsp;
&nbsp;
&nbsp;
I have the Color Swatch feature in my Prestige theme, and when I'm trying to show&nbsp;variant.image.src instead of the plain&nbsp;background: COLOR;&nbsp;it doesn't work. So I assigned the assign&nbsp;color_swatch_variant = variant.image.src | img_url: '64x64' and used&nbsp;color_swatch_variant for inline styling&nbsp;
background-image: url({{ color_swatch_variant }})
&nbsp;
but it still doesn't work, it returns the URL with no-image.gif
&nbsp;
and when I test&nbsp;
&nbsp;
{% for image in product.images %}
{% for variant in image.variants %}
{{ image.src | img_url: '85x85' }} - used for the variant: {{ variant.title }}
{% endfor %}
{% endfor %}
it shows me all the variants but I still can't figure out how to use it without the loop&nbsp;
&nbsp;
&nbsp;
Below is the shortcode from my product-form.liquid
&nbsp;
&nbsp;
<UL class="ColorSwatchList HorizontalList HorizontalList--spacingTight">
{%- for value in option.values -%}
{%- assign downcase_value = value | downcase -%}

<LI class="HorizontalList__Item">
{%- assign color_swatch_name = value | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
{%- assign color_swatch_variant = variant.image.src | img_url: '64x64' -%}

<INPUT id="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="ColorSwatch__Radio" type="radio" name="option-{{ forloop.parentloop.index0 }}" value="{{ value | escape }}" />
<LABEL for="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="ColorSwatch ColorSwatch--large {% if downcase_value == 'white' %}ColorSwatch--white{% endif %}" data-tooltip="{{ value | escape }}" style="background-image: url({{ color_swatch_variant }});background-color: {{ value | replace: ' ', '' | downcase }}; {% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}">
<SPAN class="u-visually-hidden">{{ value }}</SPAN>
</LABEL>
</LI>
{%- endfor -%}
</UL>
&nbsp;
&nbsp;
I'd really be grateful for your help.
0 Likes