Re: Shopify Dawn theme, Reduce main product image size?

Shopify Dawn theme, Reduce main product image size?

J55ni
Excursionist
22 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 41 (41)

KetanKumar
Shopify Partner
37136 3648 12061

@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 [email protected] 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
22 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
37136 3648 12061

@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 [email protected] 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
Shopify Partner
62 9 70

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
22 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
Shopify Partner
62 9 70

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

J55ni
Excursionist
22 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?

kbeautyblossom
Excursionist
37 0 16

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

KetanKumar
Shopify Partner
37136 3648 12061

@kbeautyblossom 

can you please check your collection page setting its allow this 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
kbeautyblossom
Excursionist
37 0 16

Thanks for your response. 

Are you talking about the Collection page from customizing DAWN theme? 

There isn't any option to reduce the size. I used DEBUT before and it automatically resized. 

Shouldn't I change the numbers from EDIT code? 

KetanKumar
Shopify Partner
37136 3648 12061

@kbeautyblossom 

yes you have cahnge numer

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
kbeautyblossom
Excursionist
37 0 16

Do you know where to do it? 

KetanKumar
Shopify Partner
37136 3648 12061

@kbeautyblossom 

default collection  theme customization 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
kbeautyblossom
Excursionist
37 0 16

sorry, I don't understand it. 

 

KetanKumar
Shopify Partner
37136 3648 12061

@kbeautyblossom 

can you please sent your theme zip code i will check

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
kbeautyblossom
Excursionist
37 0 16

Can you check this Section-collection-list.css? What number to change for when less than 3 products from the collection list? Thank in advance!!! 

 

@media screen and (max-width: 749px) {
.collage-section + .collection-list-section .no-heading.no-mobile-link {
margin-top: -7rem;
}
.collage-section + .collection-list-section .no-heading:not(.no-mobile-link) {
margin-top: -1rem;
}
}

@media screen and (min-width: 749px) {
.collage-section + .collection-list-section .no-heading {
margin-top: -4rem;
}
}

.collection-list-title {
margin: 0;
}

@media screen and (max-width: 749px) {
.collection-list-wrapper.page-width {
padding: 0;
}

.collection-list:not(.slider) {
padding-left: 0;
padding-right: 0;
}

.collection-list-section .collection-list:not(.slider) {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}

@media screen and (max-width: 749px) {
.collection-list-wrapper:not(.no-heading) .title-wrapper-with-link {
margin-top: -1rem;
}
}

@media screen and (min-width: 750px) {
.collection-list-wrapper.no-heading {
margin-top: 6rem;
}
}

.collection-list__item:only-child {
max-width: 100%;
width: 100%;
}

.collection-list__item .card--light-border:hover {
border: 0.1rem solid rgba(var(--color-foreground), 0.04);
}

.collection-list__item:only-child .media {
height: 35rem;
}

@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
width: calc(100% - 3rem);
}

.collection-list__item.grid__item {
padding-bottom: 1rem;
}

.slider.collection-list--1-items {
padding-bottom: 0;
}
}

.collection-list.negative-margin--small {
margin-bottom: -1rem;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
.slider.collection-list--1-items,
.slider.collection-list--2-items,
.slider.collection-list--3-items,
.slider.collection-list--4-items {
padding-bottom: 0;
}
}

@media screen and (min-width: 750px) {
.collection-list__item:only-child > *:not(.card--media) {
height: 320px;
}

.collection-list__item:only-child .media {
height: 47rem;
}

.collection-list__item a:hover {
box-shadow: none;
}

.collection-list.grid--3-col-tablet .grid__item {
max-width: 33.33%;
}

.collection-list--4-items .grid__item,
.collection-list--7-items .grid__item:nth-child(n + 4),
.collection-list--10-items .grid__item:nth-child(n + 7) {
width: 50%;
}
}

@media screen and (max-width: 989px) {
.collection-list.slider .collection-list__item {
max-width: 100%;
}
}

.collection-list__item .card__text,
.collection-list__item .card-colored {
position: relative;
}

NoaBo
Visitor
1 0 1

Hey this was super helpful thank you so much. I was wondering if there is something that can be done about the amount of images displaying at a time as well? Currently the theme is displaying every single photo for the item and makes you scroll down through these images before the rest of the product description can be reached which of course isn't ideal.

KetanKumar
Shopify Partner
37136 3648 12061

@NoaBo 

store 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 [email protected] 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
Shopify Partner
62 9 70

@NoaBo 

I've been trying to work on adding a thumbnail gallery for 4 days I can't work it out myself 😕

HamishDavisonIC
Shopify Partner
62 9 70

@NoaBo I just found out this is only on desktop, if you open it on mobile dawn has a very nice product slider.

80% of traffic is mobile (ish) it's not ideal but at least it works well on mobile 

stu17
Visitor
1 0 1

hello,

can you please advise how to re-centre the product area as resizing shifts it left.

Thank you

made4Uo
Shopify Partner
3852 717 1201

Hi, 

I tackle the problem of large image in Dawn, also added more. Transform you Dawn Theme in Debut theme product page for free.

Enjoy this features.
Product slider working.
Zoom feature working.
Variant buttons connected to the large image and the product slider.
Resize your thumbnail images.
No more massive images in the product page.

Check the code here for free. No app needed.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
HamishDavisonIC
Shopify Partner
62 9 70

Good job! @made4Uo 

J55ni
Excursionist
22 0 6

Hello @made4Uo .

 

I would like my images in Dawn theme to  look like they where in debut theme before with the  Zoom function and not huge and blurry like they are in Dawn. I do not require the slider function can i just copy some of the code then? or is it best to copy everything across even if slider isn't required. Will your code solve this and make them look more like they where in Debut previously?

 

Thanks

made4Uo
Shopify Partner
3852 717 1201

@J55ni  it would be hard to separate the slider since I have those connected in the radio buttons / variant buttons. It will show an error if you delete them. Regarding the pictures, it really depends on your image size

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
J55ni
Excursionist
22 0 6

@made4Uo  the images are totally fine in the debut theme but on the dawn theme they are blury unfortunately. Would adding your code make them appear the same as debut theme?

made4Uo
Shopify Partner
3852 717 1201

I am not sure. You can also adjust the src-set of the image actually. The Dawn theme has this src-set so it pulls out an specific size of an image that corresponds to your screen size. You can adjust those instead

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
J55ni
Excursionist
22 0 6

could you kindly tell me what code to adjust for this please?

 

On debut my images are clear and fine but on dawn they are blurry  😞

made4Uo
Shopify Partner
3852 717 1201

@J55ni are you able to try to add the code? Let me know if you have problems then we can adjust your image

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
funkydropshippi
Shopify Partner
12 0 0

thanks!

wallcraft
Visitor
2 0 0

Great help, thanks!

HamishDavisonIC
Shopify Partner
62 9 70

@wallcraft did it work well?

wallcraft
Visitor
2 0 0

Yes, worked as it should

GautamAgarwal
Visitor
1 0 0

@HamishDavisonIC - The solution you provided is great but is there a solution whereby we can reduce the size of secondary images and let the product image remain the way it is?

poetstreet
Tourist
19 0 1

this is not working for me? the image sizes are not changing

KetanKumar
Shopify Partner
37136 3648 12061

@poetstreet 

oh sorry for that issue can you please send store 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 [email protected] 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
poetstreet
Tourist
19 0 1

poetstreetboutique.com 

 

I am pretty happy with the home page sizing and the collection pages. It is just when you click on an individual product.  also my thumbnails are different sizes. you can look at the most new arrival, it is a set of rings to see. they are off on desktop and mobile

poetstreet
Tourist
19 0 1

also, the sizing right now is from me trying the tips I found on here previously

KetanKumar
Shopify Partner
37136 3648 12061

@poetstreet 

if you have any issue please provide issue images 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] 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
poetstreet
Tourist
19 0 1
here is a product page from mobile

rusinov
Excursionist
20 2 18

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.

sapandbark.com