Shopify Dawn theme, Reduce main product image size?

J55ni
Excursionist
18 0 6

Hi Folks,

Currently using Debut theme and its fine but wanting to change to the Dawn theme. Unfortunately the main product image is much bigger on Dawn and showing as blurry compared to the current  Debut theme. Can someone please tell me which code needs added to reduce it and make it clear again like the debut theme 

Regards,

J

Replies 35 (35)
KetanKumar
Shopify Partner
26715 2676 9389

@J55ni 

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

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

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
J55ni
Excursionist
18 0 6

@KetanKumar 

 

I haven't got the Dawn theme published due to the above i am still on the Debut theme. I was wanting to fix this issue before i swapped it over?

 

Kind regards,

Jonathan

KetanKumar
Shopify Partner
26715 2676 9389

@J55ni 

possible to share store preview url.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
HamishDavisonIC
Explorer
52 6 48

I don't know why people always ask for your link first

It's easy my friend

Video:

 

How to make your product images smaller in Shopify 2.0 Dawn theme

Firstly you can identify the problem:

HamishDavisonIC_0-1631459826553.png

 

The product image is too large

HamishDavisonIC_1-1631459826581.png

 

In this example you want to look for product__media in section-main-product.css

HamishDavisonIC_2-1631459826583.png

 

 

Then you simply want to change the .product:not(.product — no-media) .product__media-wrapper {
 max-width: 64%;
 width: calc(64% — 1rem / 2);
 }

HamishDavisonIC_3-1631459826639.png

 

 

Change the percentage to whatever you want and you’re done

 

J55ni
Excursionist
18 0 6

@HamishDavisonIC  Thank you, That seems to change the size of all the photos in the product? Is it possible to only change the first main photo size? The debut theme is perfect for displaying the first one and remaining ones bigger

HamishDavisonIC
Explorer
52 6 48

Do you have a specific example of what you mean? I'm not quite sure

J55ni
Excursionist
18 0 6

when i reduce the size of the main image in the Dawn theme the other images in the product are reduced even further as they are already smaller than the main image to begin with?

rusinov
Excursionist
19 2 3

I believe you are describing same issue I'm having here: https://community.shopify.com/c/shopify-design/blurry-product-images-in-dawn-theme/m-p/1312951#M3424...

I dont have an answer yet either. My product images are generated by Prihtful, 1000x1000 is the only size they can produce. So I assume this will be an issue for a lot of people.

sapnadbark.com
kbeautyblossom
Excursionist
31 0 12

This one was very helpful. Thank you! 

I have one more problem with the product size. If there are less than 4 products in a row each product page, the products sizes are double. Do you know how to adjust this? Thanks in advance. 

https://www.kbeautyblossom.com/collections/lip-care

https://www.kbeautyblossom.com/collections/toner