Why are my homepage collection images blurry on Dawn?

Store Design

Topic summary

Homepage collection images in the Dawn theme appear blurry, while the same images on product pages are sharp and high quality.

Evidence and context:

  • Screenshots compare the blurry homepage collection images vs. clearer product page images (attachments are central to understanding).
  • Store URL provided: padpal.co.il (password: thaosi). Issue located mid-to-bottom of the homepage with two blurry pictures.

Actions taken:

  • Requested site access to inspect the issue.
  • Proposed CSS fix: add img { box-sizing: revert-layer !important; } in base.css or theme.css.

Outcome:

  • The CSS change did not resolve the blurriness; collection images remain blurry.

Status and open questions:

  • No confirmed cause identified; no working solution yet.
  • Discussion remains open, with the user asking for further help to determine why homepage collection images are rendered at lower quality and how to fix it.
Summarized with AI on December 30. AI used: gpt-5.
1

Hello guys,

Im using dawn and the collection images at homepage are all blurry… there is something wrong with the collection images sizes because in the product page everything is perfect and high quality.

image in the homepage collection:

OriHacohen_0-1713709243992.png
OriHacohen_0-1713709243992.png1310×586 712 KB

same image in the product page:

OriHacohen_1-1713709275574.png
OriHacohen_1-1713709275574.png559×245 220 KB

i saw some old discussions about it but the solutions didnt work for me unfortunately.

thank you in advance,

ori

2

Hello @OriHacohen

This is Amelia at PageFly - Shopify Advanced Page Builder app.

Could you please provide me with the URL of the page so I can check it for you?

3

padpal.co.il

password is thaosi

the collection is found at home page, in the middle to the bottom… you will see two blurry pictures

4

Hello @OriHacohen

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

img {
      box-sizing: revert-layer !important; 
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

5

it didnt work, the collection pictures at home page are still blurry… any further help?

6

Up. can anybody help?