DAWN THEME : product image is way to big

Solved
OpenThinking
Shopify Partner
260 59 76

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]
0 Likes
Hai_Nguyen2
Excursionist
25 0 5

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.

 

0 Likes
OpenThinking
Shopify Partner
260 59 76

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]
0 Likes
Hai_Nguyen2
Excursionist
25 0 5

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

 

0 Likes
OpenThinking
Shopify Partner
260 59 76

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]
0 Likes
aarsaln
New Member
2 0 0

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

 

0 Likes