Need help changing ratio of product thumbnails on product page (Dawn theme)

Store Design
, , ,
1

Hello, I need to change the aspect ratio of the product thumbnails for Dawn theme on the product page. They default at 1:1 ratio but I need them to be 4:5 (landscape) ratio, as most of my images are 800X1000 or 1600X2000 and I don’t want them to appear cropped in the thumbnails.

Also, does anyone know how to make the main preview image appear first? It defaults to the first variant preview image. Any help with this would be much appreciated!!

screenshot.PNG
screenshot.PNG1621×1112 281 KB

2

Hi @Sato71 ,

Can you share your store url

3

Yes it is https://kennasatodesigns.com/

4

HI @Sato71 ,

Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css

.thumbnail-list__item 
.thumbnail { height:  auto !important;}
1 Like
5

That worked great thanks! And do you know how to change the first preview image to the main image instead of the first linked variant image?

6

Does anybody know how to make the featured image show first on the product page instead of the first variant?

7

Thanks so much for this. However, I do not see a custom.css or theme.css file in the code. I applied it to base.css and the images are the correct aspect, but the top and bottom row of images now overlap (i.e. the element didn’t account for increased height of image, it’s still in a square shaped grid). Any ideas? Thanks!