How can I adjust individual product image sizes?

Store Design
,
1

Hi,

Is there a way that I can adjust the sizes of the images shown on each individual product. Images are currently in collage layout and I would like the main initial image to be smaller and the following images to also be a little smaller.

Site: https://theothelabel.com/password

Password: theo2024

Thank you!

2

Hello @JoeyRoo :waving_hand:

In Shopify Admin, go to Edit theme code, open file product.css and add this code at the bottom

.product-image-container {
    width: 80%;
}

Hope that helps!

3

Go to your Online store > Themes > Edit code > open product.css file, add this code at the bottom of file

@media (min-width: 1068px) {
.product-grid-container {
    grid-template-columns: 1fr clamp(360px,50%,680px) !important;
}
}
4

Thanks, this worked. What do I need to change if I want to adjust the size of the images more? Looking to get it a tiny bit smaller

5

Hi, you can do update code like this and check again.

@media (min-width: 1068px) {
.product-grid-container {
    grid-template-columns: 1fr clamp(360px,60%,750px) !important;
}
}
1 Like
6

Thanks!

7

Hi, im trying to do the same but having difficulty. is anyone able to help?

8

Please share the link to your page.

9
10

Please use this code instead

@media (min-width: 1068px) {
ul.products-list {
    grid-template-columns: 1fr clamp(360px,60%,750px) !important;
}
}
11

thank you! currently its a little smaller but has 3 products on each row. if i want to have 4-5 products on each row, would it be possible?

12

You can do that by using this code

@media (min-width: 768px) {
    .products-list {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}