How can I make product images smaller on the Dawn theme?

Technical Q&A
1

Hi, how do I get my images of my products smaller? They are too big and take up most of the room on the page. I have tried a code that someone has put on here but it didn’t work.

Please help.

1 Like
2

@nishma_kp

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

https://www.etched.ae/products/water-bottle-350ml-blush-pink
[http://cdn.shopify.com/s/files/1/0561/7932/7027/products/strawlid350mlbottle.jpg?v=1648637719]
Straw lid bottle - 350ml - Blush pink
Keep hydrated with your own personalised water bottle. This bottle is ideal for kids due to it’s size and straw lid. Perfect for days in and days out, keeping your liquids cold for up to 12 hours. Make it yours by simply choosing your colour and font and stamp it with your name! This etched bottle in Blush pink has be
www.etched.ae

Please note these will not be my final images but I want to know why they are coming up so big and what I need to do for the rest of my images on my website. Thank you so much

1 Like
4

@nishma_kp

can you 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.
.product__media.media.media--transparent.gradient.global-media-settings {
    padding-top: 100% !important;
}
.product__media.media.media--transparent.gradient.global-media-settings img {
    object-fit: cover;
}
5

Hi, unfortunately this hasn’t worked. It has cropped the top of the image off.
Any other ideas? Thanks

1 Like
6

@nishma_kp

oh sorry for that but how can i check now your store password protect

7

no problem, please check again.

1 Like
8

@nishma_kp

can you try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset->/section-main-product.css ->paste the below code at the bottom of the file.
@media screen and (min-width: 990px) {
.product--large:not(.product--no-media) .product__media-wrapper {
    max-width: 50%;
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
.product--large:not(.product--no-media) .product__info-wrapper {
    max-width: 50%;
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
}
9

I tried this code but no changes were made i.e the images are still too big.

10

Hi @nishma_kp ,

Apologies for the delay in getting back to you. I tried to have a look at your store but I can see that you’ve enabled the password page. Feel free to disable it again and let me know so that I can have a look at it for you!

I will point out that we have some great guidelines for uploading images to Shopify themes including some great best practices for images.

Also when it comes to making code edits, we’d always recommend you duplicate your theme first before making changes, just so you have a solid backup to revert to if needed.

I hope this helps!

11

Hi and thank you for your reply

I have disable the password protection now, please take a look.

I will have a look at those helpful links you have also provided.

Thanks