How can I adjust the image size on my product pages?

Store Design
1

Hi, I am finishing up my online store for launch next month, and I need help making some edits in my product pages. The images on the left are currently way too big, and instead of having a big one and a small one I would like to have a main image that you can change for smaller ones on the side, such as in this website: https://www.urbanoutfitters.com/es-es/shop/bdg-tuesday-hoodie-sweatshirt?category=SHOPBYBRAND&color=030&type=REGULAR&quantity=1

How can I edit the product page formats so that the pictures are formatted in this way?

My website is: https://bywhostore.com/products/bodies-design-2

Thank you very much!

2

You’ll need post your stores password so it can be checked out.

3

thank you so much @lunaworks . Our password is “meicko9”.

4

I believe you’ll need to hire a developer(Shopify partner) for this as your product page code will need to be readjusted to have the image thumbnails on the side.

5

I see.. thank you for the information. Would we also need to hire a developer for something less complex such as this: https://accesapparel.com/collections/the-dina-collection/products/ston-polo? So the pictures being the same size (instead of one very big and one small like now)?

Thanks!

6

You could hire a developer for that too, but then I can help you fix it, as it shouldn’t be too technical ( I’m a developer by the way).

In the section-main-product.css on line 598 you’ll see this code

@media screen and (min-width: 990px){
.product--stacked .product__media-item {
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}

Change the max-width to 100% like this

@media screen and (min-width: 990px){
.product--stacked .product__media-item {
    max-width: 100%;
}
7

Perfect, now both look the same size. We would ideally want them to be smaller, like in the link above, they still seem too big. If I change width to 80% only the second picture’s size is changed. How could I make both pictures smaller? Or make the picture column take up just half the page?

Thank you for all the help again!

8

In section-main-product.css line 603, you’ll see

@media screen and (min-width: 990px){
.product__media-list .product__media-item:first-child, .product__media-list .product__media-item--full {
    width: 100%;
    max-width: 100%;
}

Adjust the max-width here for the first image.

9

Fantastic, thanks so much. I set it at 60% for the moment. However now there is a big empty space in the middle, is there an easy way to expand towards the center the right hand side (product details), also similar to the link above?

10

You can move the image to the center, by adding margin: 0 auto; in both places where you had to adjust the width.