how to display product images / media on custom design

[innois]

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.

output

[nvchien]

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.

[innois]

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