Blurry images on product display page and on collection page on ella theme

Store Design
, , , ,

Topic summary

A user reports blurry product and collection page images on their Shopify store using the Ella theme. The issue affects both product display and collection pages.

Recommended troubleshooting steps:

  • Image resolution: Upload high-resolution images (Shopify recommends 2048 x 2048 pixels) to prevent stretching and blurring
  • Theme settings: Check image size and compression settings in the theme customization panel
  • Aspect ratios: Ensure consistent aspect ratios across product images and review Product Media settings
  • Third-party apps: Disable or adjust image optimization apps and lazy-loading scripts that may over-compress images
  • Code-level fixes: Inspect CSS/Liquid files for image resolution settings (look for image_url or resize parameters), or update the theme to the latest version
  • Device testing: Verify the issue across mobile, tablet, and desktop to rule out device-specific display scaling problems

The discussion remains open with no confirmation whether the suggested solutions resolved the issue. Theme support contact is recommended if code adjustments are needed.

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

hi,

We are getting blurry images on both product display page on the collection page. Can you please help how can we fix this issue. Many thanks in advance.

https://www.rivaajethnic.com/products/lucknowi-chikankari-ombre-blue-kota-silk-dupatta

2

Hi @Abhishek51

Blurry images on your product and collection pages can be frustrating, especially when they affect the appearance of your store. Here’s how you can tackle this issue and make your images look sharp and professional.

1. Check Image Resolution

The first thing to do is ensure your images are high-resolution. Shopify recommends images that are 2048 x 2048 pixels for optimal quality. If your images are smaller, they might get stretched to fit the layout, causing them to blur. Reupload your images in higher resolution if needed.

2. Adjust the Theme Settings

The Ella theme has customization options for image display. Go to Online Store > Themes > Customize, and check these areas:

  • Image size settings: Ensure the display size matches your uploaded image resolution.
  • Compression settings: Disable any excessive image compression in the theme that might be degrading quality.

3. Inspect Aspect Ratios

Blurry images can also happen if the theme forces your images into specific aspect ratios. To fix this:

  • Use images with consistent aspect ratios for all products.
  • Check the Product Media section in your theme settings and select the appropriate scaling option.

4. Lazy Loading or Image Optimization Apps

Sometimes, image optimization apps or lazy-loading scripts might compress your images too much. If you’re using any third-party apps for optimization, check their settings to reduce compression or temporarily disable them to see if that resolves the issue.

5. Theme Code Adjustments

If none of the above works, the issue might be in the theme code. You can try:

  • Checking the CSS or Liquid files for the image resolution settings. Look for terms like image_url or resize.
  • Updating the theme to the latest version, as newer updates often fix bugs like image rendering issues.

If you’re unsure how to edit the code, you can contact the theme support team, as they’re usually helpful with such adjustments.

6. Preview on Different Devices

Lastly, make sure the issue isn’t device-specific. Test your site on mobile, tablet, and desktop to see if the blurriness persists. If the issue only appears on specific devices, it might be related to the display scaling.

I hope these steps help! If you need any other assistance, I am willing to help.

Best regards,
Daisy.