Dawn Theme Product Page - One Product Image Per Row

Dawn Theme Product Page - One Product Image Per Row

CNOS
Tourist
10 0 3

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.

Replies 5 (5)

dmwwebartisan
Shopify Partner
12321 2552 3729

@CNOS 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CNOS
Tourist
10 0 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-she...

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

dmwwebartisan
Shopify Partner
12321 2552 3729

@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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
CNOS
Tourist
10 0 3

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.

donda_lopez
Excursionist
16 1 1

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

 

Donda Lopez