How can I display all product images on my page?

Store Design
1

Hello,

My product page currently shows only one (first) image from uploaded media.

I want to show all of it.

The current code is:

{% assign productImages = %}
{% assign loopCounter = 0 %}

{% for image in product.images %}

{% unless image.alt == ‘profile’ %}
{% assign productImage = image.src | img_url: ‘master’ %}

{% for variant in product.variants %}
{% assign variantImage = variant.image.src | img_url: ‘master’ %}
{% if variantImage == productImage %}
{% assign productImage = variantImage %}
{% assign productData = ‘data-slick-variant="’ | append: variant.id | append: ‘"’ %}
{% if variant.selected %}
{% assign slickStart = loopCounter %}
{% endif %}
{% endif %}
{% endfor %}

{% capture productImages %}
{{productImages}}

{% endcapture %}

{% assign loopCounter = loopCounter | plus: 1 %}
{% endunless %}
{% endfor %}

{{ productImages }}
{% if product.metafields != blank %}
{{ product.metafields.my_fields.product_logo | metafield_tag}} {{ product.metafields.my_fields.product_ty_text | metafield_tag }} {{ product.metafields.my_fields.product_type | metafield_tag}}
{% endif %}

I have updated it with a new code, but no success:

{% assign productImages = “” %}
{% assign loopCounter = 0 %}

{% for image in product.images %}

{% unless image.alt == ‘profile’ %}
{% assign productImage = image.src | img_url: ‘master’ %}

{% for variant in product.variants %}
{% assign variantImage = variant.image.src | img_url: ‘master’ %}
{% if variantImage == productImage %}
{% assign productImage = variantImage %}
{% assign productData = ‘data-slick-variant="’ | append: variant.id | append: ‘"’ %}
{% if variant.selected %}
{% assign slickStart = loopCounter %}
{% endif %}
{% endif %}
{% endfor %}

{% assign productImages = productImages | append: ", " | append: productImage %}

{% assign loopCounter = loopCounter | plus: 1 %}
{% endunless %}
{% endfor %}

{% assign imagesArray = productImages | split: ", " %} {% for image in imagesArray %}
{% endfor %}
{% if product.metafields != blank %}
{{ product.metafields.my_fields.product_logo | metafield_tag}} {{ product.metafields.my_fields.product_ty_text | metafield_tag }} {{ product.metafields.my_fields.product_type | metafield_tag}}
{% endif %}

Overall, it does not catch ‘image’ at the end.

If anyone can see what can be changed/improved that would help a lot!!

Thank you!

2

Hi @ArminasZ ,

Try below code which display all images of products uploaded in media:

{% assign productImages = "" %}
{% assign loopCounter = 0 %}

{% for image in product.images %}

{% unless image.alt == 'profile' %}
{% assign productImage = image.src | img_url: 'master' %}
{% for variant in product.variants %}
{% assign variantImage = variant.image.src | img_url: 'master' %}
{% if variantImage == productImage %}
{% assign productImage = variantImage %}
{% assign productData = 'data-slick-variant="' | append: variant.id | append: '"' %}
{% if variant.selected %}
{% assign slickStart = loopCounter %}
{% endif %}
{% endif %}
{% endfor %}

{% assign productImages = productImages | append: productImage | append: ", " %}

{% assign loopCounter = loopCounter | plus: 1 %}
{% endunless %}
{% endfor %}

{% assign imagesArray = productImages | split: ", " %}

{% for image in imagesArray %}
  {{ image }}

{% endfor %}

{% if product.metafields != blank %}

{{ product.metafields.my_fields.product_logo | metafield_tag}}
{{ product.metafields.my_fields.product_ty_text | metafield_tag }}
{{ product.metafields.my_fields.product_type | metafield_tag}}

{% endif %}

Thank you.

1 Like
3

Hi @nidhipatel

Thank you very much for your response!!

I have found the solution, which is very similar to yours.

Thank you once again!