Re: Blurry product images Dawn Theme

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

Re: Blurry product images Dawn Theme

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

Community Blog Articles