Dawn - How do I adjust the product image size on the Product Page?

Store Design
1

Hi, as the title suggest I am having trouble finding how to adjust product image sizes for Product pages. It is making the image quality horrible.
I would also like to remove Zoom for product images too if possible.

I read in the documentation that you can reduce secondary image sizes too but it didn’t actually tell you how, unless I am blind.

Troy_0-1632316185543.png
Troy_0-1632316185543.png2280×1248 211 KB

Thank you very much for the help!

2

também estou com o mesmo problema no tema dawn, quem puder ajudar, obg!!

3

Hey @Troy_13 .

Thanks for reaching out.

I appreciate you letting us know which theme you are using as that is super helpful! Since the Dawn theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal themes team to make the coding changes on your behalf.

If you are interested in using the design time for the Dawn theme, you will need to login to the store using our Contact Us page. This will allow us to securely verify you as the store owner before discussing the changes you would like to see on the product page with a Support Advisor.

Let me know if you have any additional questions, happy to help out.

4

Hi,

May I know why you want to removed the zoom button? You cannot just reduce the images width since you will end up with a wide space on the right. You have to edit the product info container as well. Follow the steps below. Check the video. Let me know if you are having issues

  1. Go to your Online store > Themes > Actions > Edit code
  2. Go to Asset folder and open the section-main-product.css file.
  3. Find the code below
@media screen and (min-width: 990px) {
.product:not(.product–no-media):not(.featured-product) .product__media-wrapper {
max-width: 64%;
width: calc(64% - 1rem / 2);
}

  1. Change the max-width to 50%

  2. Next, find the other code for the product info, see below

.product:not(.product–no-media):not(.featured-product) .product__info-wrapper {
padding-left: 4rem;
max-width: 36%;
width: calc(36% - 1rem / 2);
}
  1. Change the padding-left to 5rem, max-width to 50%, then click SAVE
2 Likes
5

Thanks so much for your help!

1 Like