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

Troy-
New Member
1 0 0

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

 

 

Thank you very much for the help!

0 Likes
RafaelPereira24
New Member
4 0 0

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

0 Likes
Ollie
Shopify Staff
Shopify Staff
297 42 51

Hey @Troy-.

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.

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
made4Uo
Trailblazer
156 11 39

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);
}

 

    4. Change the max-width to 50%

    5. 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);
}

    6. Change the padding-left to 5rem, max-width to 50%, then click SAVE

 

 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes