DAWN theme - Image resize on product page

Solved
Superhaq
Excursionist
29 1 13

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)

Accepted Solutions
HamishDavisonIC
Explorer
52 6 42

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 39 (39)
KetanKumar
Shopify Partner
24945 2500 9043

@Superhaq 

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
3 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
New Member
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

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.

jessiems
Tourist
3 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
Explorer
52 6 42

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

jessiems
Tourist
3 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
Explorer
52 6 42

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

Superhaq
Excursionist
29 1 13

This worked! Thank you so much!