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 34 (34)
HamishDavisonIC
Explorer
52 6 42

@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
27 0 9

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
Navigator
210 11 77

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.

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
HamishDavisonIC
Explorer
52 6 42
J55ni
Excursionist
18 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
Navigator
210 11 77

@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

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
J55ni
Excursionist
18 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
Navigator
210 11 77

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

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
J55ni
Excursionist
18 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