Dawn Theme Product Page - One Product Image Per Row

Store Design
1

Hi,

I am looking for help on my product page within the Dawn Theme.

By default and as long as you don‘t have more than 2 images in total for a given product, Shopify displays the product images in full size and shows just one image per row.

However, as soon as you have a total of 3 or more images, the theme combines two images into one row an makes them smaller, with the exception of the first image that remains full size and the last image in case you have an even number of total images.

My wish: I would like to keep just one image per row in full size, regardless of how many product images I have in total assigned to a given product.

Thank you for your help.

2

@CNOS

Please share your store URL & share screenshot what do you want !

Thanks!

3

A sample URL of a product page is the following: https://getabottle.de/products/edradour-12-jahre-2009-2021-natural-cask-strength-cask-154-ibisco-sherry-single-malt-scotch-whisky-0-7l-57-9-vol

The screenshot shows the current situation with a product that has 3 images.

I would like each image to be in a separate row (like the first image basically) and I don‘t want to see image 2 + 3 combined in one row. Thank you.

E9B6F1B9-9D60-4244-8D64-B7991F654A6F.jpeg
E9B6F1B9-9D60-4244-8D64-B7991F654A6F.jpeg2732×1681 349 KB

1 Like
4

@CNOS

Please try this code

  1. Go to Online Store->Theme->Edit code

  2. Asset->/base.css–>paste below code at the bottom of the file.

@media screen and (min-width: 750px){
.grid--2-col-tablet .product__media-list .grid__item {
    width: calc(100% - 1rem)!important;
}
}
1 Like
5

Fantastic → that did the job. Thank you very much.

One follow-up question on the code: Since it says „tablet“ within the code line, does it mean it would only be like that on a tablet device such as an iPad? I am asking because I am only having an iPad device handy at the moment to check the result and there it worked perfectly. But I am wondering if it would also look the same on a proper desktop PC.

6

Hi!

I’ve tried several different versions of this code and it’s still not working! Please take a look and advise!

https://titleofwork.myshopify.com/

pass: siacad