Move product image underneath description

Store Design
1

Hello. I am using DAWN theme but would like to know if any solutions is possible for SPOTLIGHT theme too

I am trying to move product image as image stack under the description on both desktop and mobile, while keeping the main image at the top.

I have seen such design on other shops but unfortunately I could not find the link for your reference.

001.jpg
001.jpg990×1938 143 KB

Like this on desktop, and as a single image stack on mobile

Thanks!

2

You will need to edit theme file to do that

3

Hello @GRGR ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → product-template.liquid file

Below the line that contains {{ product.description }}, add the following code to display the product image stack:

{% if product.images.size > 1 %}
  
    {% for image in product.images %}
      
    {% endfor %}
  

{% endif %}

Go back to Assets folder-> base.css file → add this following code at the bottom of page

.product-image-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-image-stack img {
  width: 100%;
  max-width: 200px; /* Adjust the width as needed */
}

Save changes

Hope this can help.

Ali Reviews team.

1 Like
4

Hello! Really appreciate your help!

I have modified it a little bit to suit my case.

I have one more questions regarding the product media on top
is it possible to only show the main image instead of all the images on the top part?

Thanks again!!