Shopify Dawn theme, Reduce main product image size?

J55ni
Excursionist
20 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)
HamishDavisonIC
Shopify Partner
56 6 54

@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 

kbeautyblossom
Excursionist
36 0 13

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

stu17
New Member
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
1485 230 344

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.

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
HamishDavisonIC
Shopify Partner
56 6 54
J55ni
Excursionist
20 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
1485 230 344

@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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
J55ni
Excursionist
20 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
1485 230 344

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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
J55ni
Excursionist
20 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
1485 230 344

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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
funkydropshippi
Tourist
7 0 0
wallcraft
New Member
2 0 0

Great help, thanks!

HamishDavisonIC
Shopify Partner
56 6 54
wallcraft
New Member
2 0 0

Yes, worked as it should

GautamAgarwal
New Member
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
16 0 1

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

KetanKumar
Shopify Partner
32573 3272 10854

@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 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
poetstreet
Tourist
16 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
16 0 1

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