How to stop Dawn theme from scaling up small product images?

sweetstash · ‎01-04-2024

I have one product that the images provided by the manufacturer are very small. Dawn scales the image up and I want to stop that. I want Dawn to continue scaling down if necessary, but not up more than 100% of the original image for both my collection and product pages. Here are the examples I am talking about. See how blurry the product image is.

https://www.crossstitchboutique.com/collections/mill-hill-beads

https://www.crossstitchboutique.com/products/mill-hill-bead-packet-00020

Can someone please help me fix this? I have been searching for a solution for months. There has to be some kind of code to stop it from scaling any image above 100% actual image size.

Minimal theme did not do this... I love Dawn otherwise, but this looks like total crap for my customers.

Thank you

Dan-From-Ryviu · ‎01-04-2024

Go to your Online store > Themes > Edit code, open theme.liquid file, add this code below under <head> element

<style>
.product-media-container .media img,
.card__media .media img {
    top: 50% !important;
    left: 50% !important;
    height: 112px !important;
    width: 112px !important;
    transform: translate(-50%, -50%) !important;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

sweetstash · ‎01-04-2024

Thank you, that is beautiful and it worked... except it did it to all of my product pages, and that I do not want. There has to be a code so it just doesn't scale any image above 100%.

Dan-From-Ryviu · ‎01-04-2024

Could you explain more?

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

sweetstash · ‎01-05-2024

Sure... It took all of my product images and made them a small square. I do not want it making all pictures that are 2500 px size and scaling them down to 112 px.

It made this picture https://www.crossstitchboutique.com/products/olivia-the-forest-witch

and these https://www.crossstitchboutique.com/collections/bella-filipina

112 px square. That isn't a solution for me. I just need Dawn not to scale original image size above 100%.

sweetstash · ‎01-30-2024

@Dan-From-RyviuI am still having this issue and had not heard back after I explained further. Is there any other advice/solution to this you may have?

Thank you

How to stop Dawn theme from scaling up small product images?

How to stop Dawn theme from scaling up small product images?

Community Blog Articles