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

Troy-
Visitor
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!

Replies 4 (4)

RafaelPereira24
Tourist
4 0 1

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

Ollie
Shopify Staff
2282 453 395

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

made4Uo
Shopify Partner
3804 713 1124

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

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
jjo123
Visitor
1 0 1

Thanks so much for your help!