Featured Product Image Blurry

Store Design
, , ,

Topic summary

A user is experiencing blurry images in their featured collection on the homepage, despite uploading high-resolution files and limiting each row to one product.

Current Setup:

  • Theme: North
  • Original image: 640x800px
  • Images appear blurry when displayed at full size

Suggested Solutions:

  • Upload images at minimum 1920px wide (or 2500px+ for better quality on larger screens)
  • Use high-resolution images (at least 4472x4472px supported by Shopify)
  • Save in high-quality formats (JPEG, PNG) without excessive compression
  • Check theme settings for “Image Ratio” option and try changing from “Crop” to “Adapt to image”
  • Ensure images are square or can be cropped to squares, as featured collections typically use square formats

Current Status:
The user updated to a higher resolution image but the blurriness persists. They are seeking custom CSS code to resolve the issue and are open to working with developers on a solution. The problem remains unresolved.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Every image I upload to the featured collection is blurry. I limited each row to one product but want the image to be full size on the home page. Does anyone know how to fix the quality but keep the sizing?

Website - www.evrenclothing.com

Password - chewno

2

Hello @isaacdob
As i have checked your image is 640x800px and the theme you are using is “North”.
Ensure that the images you are uploading are of high resolution and quality. Low-resolution images can appear blurry when enlarged or displayed in larger dimensions.
Opt for images with a resolution of at least 1920 pixels wide for full-width display on most screens. Higher resolutions (like 2500 pixels or more) can provide better quality on larger screens.
Avoid excessive compression when saving or uploading images.

If you are still facing issue, then you need to consult with the web developer or designer.
Thanks

3

Hi @isaacdob

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

There are a few reasons why your featured collection images might be blurry on Shopify, even though you limited the rows and want them full size:

  • While Shopify allows images up to 4472x4472 pixels, it might be automatically resizing them for display. Ensure your uploaded images are at least the size you want them displayed at.
  • Shopify’s featured collections typically use square images. Double-check that your images are square (width and height equal) or can be cropped effectively into squares.
  • Some themes have an “Image Ratio” setting in theme settings. Try changing it from “Crop” to “Adapt to image” or a similar option that displays the full image without stretching.
  • Start by uploading images in a high-quality format (JPEG, PNG) without excessive compression.

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

4

Thanks for getting back to me. I updated the image at a higher resolution but it still seems to be coming out blurry. Is their any code that could fix this. I would love to work with you on this.