Re: DAWN THEME : product image is way to big

Solved

Why is my Dawn theme product image too large?

Hai_Nguyen2
Excursionist
25 0 7

hello,

just installed the dawn theme but the product image is super big.

wondering if anyone has any solution to this problem?

a couple of members here has asked this question before but received no answer.

would you share your solution if you have one with us?

thanks

hai

Accepted Solution (1)

diego_ezfy
Shopify Partner
2969 571 909

This is an accepted solution.

@Hai_Nguyen2,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
@media (min-width: 749px){
    .product.grid{
    justify-content: center !important;
}
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper{
    max-width: 300px !important;
}

}


</style>


You can change the width, 300px, to any width you wish. The height will be calculated automatically. 

Kind regards,
Diego

View solution in original post

Replies 24 (24)

suyash1
Shopify Partner
9853 1226 1566

@Hai_Nguyen2 - can you please share your product page link, where it as big image? using css we can reduce the image size. 

To build shopify pages use pagefly | Contact me - [email protected] , My timezone is GMT+5:30. | Support me
Hai_Nguyen2
Excursionist
25 0 7

hi suyash,

thanks for taking the time in helping me out on this.

here's my product link that has the product image being way to big.

https://culturalheritagebooks.com/products/fritz-kahn-infographics-pioneer-english-italian-and-spani...

i tried to edited the file in the featured-product-liquid page under section but couldnt find how it work.

thanks

hai

Hai_Nguyen2
Excursionist
25 0 7

let me try asking this question another way.

does anyone know where is the file folder for the feature-product-image would be located in the dawn theme so that I can adjust the size of the image in the product page?

any help would be appreciated.

thanks

sndev
Tourist
6 0 1

Seems like it was answered here: https://community.shopify.com/c/shopify-design/dawn-theme-large-image-on-pdp/m-p/1267709

I could not get it to work though. Please let me know if you have any success!

Hai_Nguyen2
Excursionist
25 0 7

sndev-

yeah, i took a look at the solution that the shopify partner  described but it seem that that file is for VIDEO and not Images.

it's the wrong file.

the direction is correct but the image is in another file.

This blog post that marcoswatanabe posted in his reply has the correct answer to our problem but the writer didn't mention where on earth the file folder that the image would be located.

if he could have pointed that out. it would have been a life saver.

here the blog post that I am referring too.

https://www.shopify.com.ph/partners/blog/img-url-filter

sndev
Tourist
6 0 1

We ended up having to add custom css to resize everything. Such a pain

Hai_Nguyen2
Excursionist
25 0 7

That is a pain. Dawn 2.0 is really good but shopify still need to improve a bit more on it. these are low hanging fruit as well. They arent anything difficult and many user use this setting a lot as well. if you dont mind me asking, can you give me an example of your shop so that I can see if it worth it for me to get a developer to do the same? thanks hai

made4Uo
Shopify Partner
3850 717 1194

You can edit the images and the product info sizes easily. Just a few edits here. 

 

 

  1. Go to your Online store > Themes > Actions > Edit code
  2. Go to Asset folder and open the section-main-product.css file. 
  3. Find the code below
 @media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
max-width: 64%;
width: calc(64% - 1rem / 2);
}

 

    4. Change the max-width to 50%

    5. Next, find the other code for the product info, see below

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

    6. Change the padding to 5rem, max-width to 50%, then click SAVE

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

diego_ezfy
Shopify Partner
2969 571 909

This is an accepted solution.

@Hai_Nguyen2,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
@media (min-width: 749px){
    .product.grid{
    justify-content: center !important;
}
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper{
    max-width: 300px !important;
}

}


</style>


You can change the width, 300px, to any width you wish. The height will be calculated automatically. 

Kind regards,
Diego

thewolf22
Tourist
5 0 1

Excellent Solution! Worked Exactly as needed. Thank You!

BottleTripWines
Tourist
10 0 1

Thanks @diego_ezfy , this worked for me, although, it seems like it resizes every single image, so for one of my smaller images, it made it too small, while it adjust a large image perfectly.

However, how do I apply this concept on a Collections page?  I only have two items in my collections page right now, and the images for them are huge, which is unnecessary.  I can't post the link because my site is not published yet, but does anyone know what I am talking about?

 

Separate gripe, which I wrote to Shopify about and they politely responded that they know this but haven't solved the problem for us yet:

However, I don't see why @Shopify won't just make an option (for us non-css experts) to just be able to resize each individual image.  Other companies do this, and have done this since I was a teenager learning HTML. 

I have made about 6 different theme versions now, and the inability to size the fonts and images consistently all over the website, is maddening.

Thanks

 

bondbeyondbox
New Member
11 0 0

Hi! Your advice is great. I tried it and it worked, however in my case I only wish to reduce the size of featured products images on home page. Could you help me with that? Any sort of advice would eb greatly appreciated! Thank you in advance.

Irene_Otto
Shopify Partner
19 0 13

Thank you I added this code just changed the image size and boom.... looks good 🙂

Thank you.

Only one more thing I would like to know, when there is a lot of product images the customer must scroll down on the images before they can see the product description, I would like for the product description also to be scrolled down at the same time as the images..... not sure if you understand what I mean check my website https://www.mommiesbestmall.com/products/dupioni-silk-dress and start scrolling I want both the images and the description side to be scrolled at the same time, how can I do that?

Ayaz93
Visitor
1 0 0

Thanks man! Worked for me perfectly! Much appreciated.

wasimkhann
Shopify Partner
18 0 1

Hi, How to change portrait image size in collection because images are too small and not looking half cut. I'm using dawn theme 10.0.

dunyadoesthings
New Member
5 0 0

Hey Diego,

When I tried to implement this solution to my opposite problem and tried to make my image larger, it didn't do anything. It did make it smaller when i set it to smaller size but nothing seems to be working for me to make my image bigger.

If you have any idea on what might be going on, please help 💕

OpenThinking
Shopify Partner
321 81 124

Hi there,
Jack from OpenThinking here!

Actually it's really easy you can do that with one line of CSS.

Copy&Paste the following file inside your layout/theme.liquid file, just before the </head> tag!

<style>.media>img { object-fit:none!important; }</style>



let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
Hai_Nguyen2
Excursionist
25 0 7

like everyone, i am lazy by nature and went for jack from openthink with that one line of CSS - well, jack one line of code didnt work for me. I guess if something is to good to be true then....

 

I will be trying made4Uo and diego_ezfy suggestion to see if it works and will post here my finding.

 

thanks everyone for helping to get to a solution for this very minor problem.

 

OpenThinking
Shopify Partner
321 81 124

LOL, Same!! But you wasn't 100% honest tho. It is working but your image is way too small so it's still a bit pixelated...

 Try with this:

 

<style>.media>img { object-fit: scale-down!important }</style>

 

 

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
Hai_Nguyen2
Excursionist
25 0 7

Openthinking - thanks for this new update.

my photos are based solely on what google think will best delivery to the device that a user used. 

currently only 21 of those photos are low quality images. this is out of 10 thousand SKU, so I am being honest with what I say. 

i have also given your example a try but it didnt work out for me. the photo seems a bit wonky, so i will be using another solution. it might be good for another user but not for me. thank you for your help.

also, for anyone who want to know more about Openthinking solution, here's a link to the CSS from Mozilla that might help out if the size doesnt seem to work for you.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

 

OpenThinking
Shopify Partner
321 81 124

Ok, no probs.

But imho a low quality pixelated image is never the answer even on a toaster, and I don't think Google likes that too.

You need to always upload the best quality image and let the browser deliver the best fit for the device/screen visiting the website. That's why "srcset" and <picture> were introduced.

all the best,
Jack.

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
aarsaln
Shopify Partner
10 0 1

I was struck to resize thumbnails(images below main product image) and this code work for me 

I put in the end of the base.css file

ul.product__media-list.grid.grid--peek.list-unstyled.slider.slider--mobile li:not(:first-child) {
max-width: 283px;
}

aarsaln_1-1635247665404.png

 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact Us
Skype: arsalan29khan
Email me directly - [email protected]
guilhermealbino
Shopify Partner
22 1 7

Doing that, I'm having a problem with padding. 

Below is the image with the wrong padding. However, I can fix this by adjusting the padding in element.style. But I can't find this class in liquid, as shown in the second image.

Do you have any ideias how could I solve it?

 

Wrong paddingWrong paddingCorrect paddingCorrect padding

NickS12
Tourist
6 0 5

Thank you so much - this worked beautifully - I was wondering if you could help me with image size when I click on the main product photo - it shows all product photos but they're huge - I'd like to make them a little smaller as well. 

Thanks!