Homepage is different than theme editor

Store Design
,
1

Hello there,

I love how my home page turned out in the Desktop version in the editor. However, when I enter fullscreen or view my live page, the heading moves AND the images of my featured products are blurry.

When I zoom (scroll in) the image quality reverts back to normal for some reason. Can anyone please offer a bit of assistance? Thank you!

Image 1 - editor

Image 2 - live

Image 3 - live zoomed in to 150%

Editor.jpg
Editor.jpg1556Ă—940 173 KB

Live.jpg
Live.jpg1906Ă—947 176 KB

Live Zoomed.jpg
Live Zoomed.jpg1901Ă—936 192 KB

2 Likes
2

Hey @Adrianski

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

https://thewhimsical.store/

2 Likes
4

Hey @Adrianski

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT

Moeed_0-1746459824861.png
Moeed_0-1746459824861.png1897Ă—909 298 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
5

This happens because you’ve added a rule to make your image grid full-bleed:

@media screen and (min-width: 990px) {
  ...
  .collection--full-width slider-component:not(.slider-component-desktop) {
    padding: 0 1.5rem;
    max-width: none;
  }
}

max-width was initially 120rem, you’ve set it to none.

However, your collection title element still has this width-limiting rule. This is why when you make your browser wider, collection grid becomes wider, but collection title stops growing after 1200px (which is the equivalent of 120rem in this theme).

And here lies the reason why your images become blurry.

The theme uses srcset image parameter together with sizes. These two allow browser to select image which will be the best match for current browser window width and sizes is the parameter which defines how wide the image will be give the window width.

Here is the sizes for your featured collection product images:

sizes="(min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"

It says that if window is wider than 1200px, the image size is expected to be 267px, which is no longer true – your images will grow wider since you’ve unset the max-width rule.

For your setup the sizes parameter should be similar to:

sizes="(min-width: 990px) calc((100vw - 2*1.5rem - 2* 8px) / 3), (min-width: 750px) calc((100vw - 128px) / 2), calc((100vw - 35px) / 2)"

Unfortunately, since themes switched to native responsive images from lazysizes library, calculating proper sizes parameter became a quite complex task.

Because this code is good for 3 images per row on desktop, but if you decide to switch to 2 or 4, it will become wrong.

Therefore it’s a bit difficult to properly fix your problem by editing Liquid code.

I would try this – add a “Custom Liquid” section aright after the “Featured collection” one and paste this code:
1 Like
6

Hi, thank you. This fixed the heading but not the image quality.

7

Still trying to figure out how to fix the image quality.

8

Thanks, Tim. This actually worked. I wonder if you could help me because it feels like the hero image also suffered quality issues.