how to display product images / media on custom design

how to display product images / media on custom design

innois
New Member
8 0 0

Hii, 

I want to display products on below format, i am able to display product name, price and main feature image, but facing issue in releted images.

Desktop - 17.png

 

output

 

Desktop - 17.jpg

Replies 2 (2)

nvchien
Shopify Partner
55 23 13

Hi @innois,

 

To loop through a product's media and print them out, you can refer to the code below:

{% for media in product.media %}
  {% case media.media_type %}
    {% when 'image' %}
      <div class="product-image">
        <img src="{{ media | img_url: '100x100'}}" alt="{{ media.alt }}">
       </div>
    {% when 'external_video' %}
      <div class="product-single__media">
        {{ media | external_video_tag }}
      </div>
    {% when 'video' %}
      <div class="product-single__video">
        {{ media | video_tag: controls: true }}
      </div>
    {% when 'model' %}
      <div class="product-single__media">
        {{ media | model_viewer_tag }}
      </div>
    {% else %}
      <div class="product-single__media">
        {{ media | media_tag }}
      </div>
  {% endcase %}
{% endfor %}

 

You may need to add more CSS code to meet the requirements. Hope this helps.

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.
innois
New Member
8 0 0

Yes, I got output using this. but i also want to show only 4 product images on section.