New Shopify Certification now available: Liquid Storefronts for Theme Developers

DAWN theme - Image resize on product page

Solved
SH_23
Excursionist
32 1 15

Hi, I have just switched to the dawn theme, however the images on the product pages are absolutely huge. Is there any way to resize them? Thanks

Accepted Solution (1)
HamishDavisonIC
Shopify Partner
62 9 66

This is an accepted solution.

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

 

View solution in original post

Replies 44 (44)
KetanKumar
Shopify Partner
36721 3634 11914

@SH_23 

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
jessiems
Tourist
4 0 2

Everyone is having this issue and it's driving me nuts finding a solution.
This is literally the only issue with this theme and I hate it with a passion.

product gallery for dawn.jpg
The mobile version doesn't have huge images but it has a swipe option most customers don't realize they have to swipe to see more images.

dawn mobile.jpg
I LOVE EVERYTHING ELSE about this theme but my conversion had dropped dramatically
since switching to this theme and the only thing that really changed was the gallery of the product's
and the toggle for the main menu on mobile version (which was my main reason for switching to this theme,
easier to navigate via mobile)

https://jessiemarie.studio/products/the-element-10-18-rainbow-colored-human-hair-extensions 
The images are HUGE as shown above. I want the gallery configuration that's in the "simple" Theme :
simple mobile.jpg
product gallery for simple.jpg
PLEASE tell me how to change the product media gallery to the simple theme's.
The current configuration is terrible and there's so many unsolved threads in the forums about it.

dayangmros
Visitor
1 0 2

https://barstool.engineering/product-image-slider-for-shopify-dawn-theme/

I found this option to have it changed into a slider, but im not sure how it works or how to insert the codes, anyone can help ?

definitely prefer this over the huge images

website: https://ohdayang.com

jessiems
Tourist
4 0 2

It's hard to pin point one code because of the theme's liquid. I read through the entire theme's codes and it all boiled to it being something just built into the theme where you'd basically have to reconstruct. It's not an edit friendly template by any means. I kept reading "lazy load" in the product theme codes (the ones I could find) and it made me so frustrated everytime I seen that wording lbvs

HamishDavisonIC
Shopify Partner
62 9 66

This is an accepted solution.

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

 

jessiems
Tourist
4 0 2

This is exactly what I was looking for!!!! Thank you, giving it a shot in a little bit and I'll give updates💜

HamishDavisonIC
Shopify Partner
62 9 66

I'm happy to have helped

I would very much appreciate if you gave my answer as a solution as I'm new and trying to build a reputation

Thanks and have a great day

Hamish

Income stream surfers

trkk
Tourist
11 0 3

I just tried this and it didn't work for me. Do you change both of the 64s?

SH_23
Excursionist
32 1 15

This worked! Thank you so much!

HamishDavisonIC
Shopify Partner
62 9 66

You're welcome

If you need any more help I'm creating a video series so just leave another question and I'll solve it for you

Hamish

Pauline_Millwar
Tourist
10 0 9

Hi Hamish,

Thank you so much for posting the resolution to this.  We found changing the section below (shown on your screen print) changed the width of the description text, so we changed all of the 4 percentages to 50% and the whole page looks so much better 🙂

Can you help with the product zoom? When you click on an image, it takes up the whole page. Is there anyway of reducing this?

Many thanks

HamishDavisonIC
Shopify Partner
62 9 66

I'm sure there is!

If you submit a post here on the forum I will take a look at it when I finish work

Thanks

Hamish

SH_23
Excursionist
32 1 15

Im trying to have the text in the description fill the full width of the page rather than a column on the right hand size. Is this something you can assist with?

Okhrana
Visitor
1 0 1

Im trying to have the text in the description fill the full width of the page rather than a column on the right hand size.
Is this something you can assist with?

This is what i need to!!
Somebody got a solution?

HamishDavisonIC
Shopify Partner
62 9 66

"Thank you so much for posting the resolution to this.  We found changing the section below (shown on your screen print) changed the width of the description text, so we changed all of the 4 percentages to 50% and the whole page looks so much better"

 

Have you tried this?

SH_23
Excursionist
32 1 15

Yes that worked to resize the images, however my question is in regard to the product description

Raghav_shopi
Tourist
7 0 5

Hi.

The solution worked. Thanks @HamishDavisonIC @SH_23 !!

 

@media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
max-width: 44%;
width: calc(44% - 1rem / 2);
}

.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
padding-left: 8rem;
max-width: 50%;
width: calc(50% - 1rem / 2);
}
}

 

Also, I changed the next part to 50% 50% to widen the product description. Increased the padding on the left to 8 rem to increase the gap between the Images and Text.

 

 

Raghav_shopi
Tourist
7 0 5

@HamishDavisonIC 

 

1. How can we change the grid layout of the Images to a carousel layout?

HamishDavisonIC
Shopify Partner
62 9 66

Hey I believe this would be front-end, so you just delete the columns and instead put a carousel. If this isn't correct I'll look into it when I get home

Raghav_shopi
Tourist
7 0 5

I don't think DAWN gives that option of changing it to a carousel format. 

In fact, not much can be changed in the product description itself on the front end. 

Please have a look and opine

Cheers

Raghav_shopi
Tourist
7 0 5

@HamishDavisonIC 

 

Did you figure out a way to change the grid layout to a Carousel layout?

j1419
Shopify Partner
49 2 17

@HamishDavisonIC 

I didn't see the option to make the product images a carousel on the front end. If it's possible to make the desktop version have an image slider like it does on mobile that would be great.

The only thing I have seen online is this guide but they don't explain where to place the code:

https://barstool.engineering/product-image-slider-for-shopify-dawn-theme/

Reducing the image sizes helps but an image carousel looks much cleaner than scrolling down the page

HamishDavisonIC
Shopify Partner
62 9 66

@j1419 I also found this guide -  here is his github with where to place the code, you have to make your own asset called product-gallery.js

https://gist.github.com/josephbona/b300b9e81e3bc53e27493555ae6795c1

But it doesn't work properly, and to be honest it has a perfect grid layout on mobile anyway so don't worry too much about desktop (if you follow his guide with his github i think it stops the gallery working on mobile anyway)

 

j1419
Shopify Partner
49 2 17

@HamishDavisonIC Is there a way to make the product images on desktop a carousel/slideshow? This grid layout is large and requires you to continue scrolling to see all the images.

Current Desktop Grid ViewCurrent Desktop Grid View

A slideshow for the images looks better. Example below

image.png

artifulboutique
Excursionist
37 0 9

OUHHH! Merci! Thank you so much! I was editing my images one by one. My god... 

Raghav_shopi
Tourist
7 0 5

Hi @made4Uo ,

Thank you for the great help!.

I was able to change the image to one large image with smaller images of variants below it.

However, it doesn;t show the carousel /arrows and i am unable to scroll to the 5th image onwards.

made4Uo
Shopify Partner
3787 710 1103

The carousel arrows get disables if your variants is less than 5. Make sure you did not hide_variants as well. It might hide your images 

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!
sculptbythesea
Visitor
1 0 1

How about changing the size of the product images on the main collection page?

KetanKumar
Shopify Partner
36721 3634 11914

@sculptbythesea 

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,

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
Solandra
Visitor
2 0 0

Does this change the image sizing for all product photos then?

I'm having the issue where the photo gets cropped in the viewing box until you roll over it... then you can see the full image. I'm having this issue in the "Products" photos and the "Categories" photos.

 

made4Uo
Shopify Partner
3787 710 1103

@Solandra 

Hi, 

Check this video for tutorial on how to adjust the images in the product page, including the product description. Since you are resizing the images, product description need to be adjusted as well. 

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!
stujmiller
Visitor
1 0 0

Hi @made4Uo , how can we hide the thumbnail selector if there's only one image for the product? At the moment it displays a thumbnail of the active image even if there's only one which doesn't look great. Thanks in advance - great tutorial!

 

stujmiller_0-1637754582170.png

 

made4Uo
Shopify Partner
3787 710 1103

@stujmiller  you can add an if statement to the slide-image. Find the active-thumb code in the main-product.liquid (there's two, do the code to both), then add {% if product.media.size > 1  %} active-thumb {% endif %} 

 

Code should look like below

<img class="slide-image {% if forloop.first %} {% if product.media.size > 1 %} active-thumb {% endif %} {% endif %}"

 

Let me know

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!
Natalie_Z
Tourist
3 0 1

It worked! Thank you for this - you put the information forth so clearly and made it easy to understand!!

My product images are all a good size, except when I click to enlarge the photo - it becomes very big - is there a way to control the zoomed in size? 

Many thanks, 

Natalie 

made4Uo
Shopify Partner
3787 710 1103

Hi @Natalie_Z  Dawn is having this src-set which images are being called depending on the screen size. If you want to adjust it. You have to adjust the src-set

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!
HamishDavisonIC
Shopify Partner
62 9 66

Well done!

funkydropshippi
Shopify Partner
12 0 0

Thanks income stream surfers!

mstav2u
Excursionist
21 0 1

Okay since I'm not a computer wiz, can a person just go to the section-main and change the size and that will take care of the entire store, or does a person have to go to the inspect on each product page and do something first?  What about an image on the front page of the store, if they want it smaller?  Will going to the section-main and then change the size in there take care of all pictures?  Just trying to figure this out as the pics are to big and slowing my store down.  Thanks in advance for helping me because I'm not quite understanding everything on the video.  It went to the inspect on the page and then it went to the section-main, so I'm not sure if a person needs to do both to make it work.  

Marilyn

grates2go
Visitor
1 0 1

@HamishDavisonIC Do you know how to also change the size of the thumbnail images? I would like four thumbnail images to fit underneath the main image.

KetanKumar
Shopify Partner
36721 3634 11914

@grates2go 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

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
CarlosDeco
Excursionist
28 0 16

Hi,

How can I do to see all the images in the mobile phone? I want that all of them appears under the main photo. Do you know how to do it? thanks!

amamoslasflores
Visitor
1 0 1

Thanks it works fine, but is there any way to expand the size of the product info?

 

https://www.amamoslasflores.com.mx/products/bouquet-amor-en-rosa-rosas-y-hortencias

 

It looks bad after resizing

 

Thanks

KetanKumar
Shopify Partner
36721 3634 11914

@amamoslasflores 

can you please select medium size i hope this fine 

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
Raghav_shopi
Tourist
7 0 5

Having the same issue with no good answer as yet .

1. Resizing the image and adding a carousel display like . Similar to debut theme 

2. Splitting the description text to occupy the full width.