DAWN theme - Image resize on product page

Solved
Superhaq
Excursionist
31 1 14

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)
made4Uo
Shopify Partner
3756 709 1078

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
36688 3633 11881

@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
36688 3633 11881

@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.