Shopify Dawn Multirow Image is blurry on mobile

Shopify Discussion
1

Issue:
I have two separate multi-row columns on my homepage, and both contain images that appear blurry. All other images on the site, such as in the slideshow and collections, are displaying perfectly fine. However, these two images are being rendered blurry.

What I’ve Observed:
When inspecting the images, I noticed that Shopify is rendering them at a size of 360px by 360px, which is causing the blurriness.

Goal:
I want to prevent Shopify from resizing the images to 360px and maintain the original resolution to avoid the blur.

2

Your images appear blurry because Shopify is resizing them to 360x360px. To fix this:

  1. Go to Online Store > Themes > Edit code.

  2. Find the section file for the multi-row columns.

  3. Replace
    {{ image | img_url: ‘360x360’ }}
    with
    {{ image | img_url: ‘800x800’ }} or {{ image | img_url: ‘master’ }} for full quality.

  4. Save and refresh your site.

This will prevent Shopify from downscaling the images and keep them sharp.

3

It sounds like the issue is due to Shopify automatically resizing your multi-row column images to 360x360 pixels, which is causing them to appear blurry. This typically happens when the theme or section is set to display images at a fixed size, rather than allowing for higher resolution or responsive loading.

Here’s how you can resolve this:- Check your original image size: Make sure the images you’re uploading are high resolution—ideally at least double the size they need to appear on screen. For example, if the section displays them at 360px, try uploading them at 720px or higher.

  • Adjust your theme settings: Head into your Theme Customizer (Online Store > Themes > Customize) and look for image settings within the section that controls your multi-row or featured columns. Some themes let you adjust image display size or aspect ratio directly.

  • Update the theme’s code: If the theme doesn’t allow you to change this through settings, a small update in the theme’s code may be required to request higher-resolution images from Shopify’s servers. This ensures the images are displayed clearly, especially on high-resolution screens.

4

Hi, thanks for the quick response.

I’ve tried using high-resolution images, and there doesn’t seem to be any options for adjusting the image settings. Do you know which specific code or file I need to modify? I’ve experimented with the multirow.liquid file, but nothing seemed to resolve the issue.

5

Hi @sarah17278 ,

Dawn theme stretches images in multirow to fill width and height of the block. If you use images smaller than that area you could try adding the following custom CSS:

.media > :not(.zoom):not(.deferred-media__poster-button) {
  width: auto;
  height: auto;
}

It could look like this:

KostiantynES_0-1746630523505.png
KostiantynES_0-1746630523505.png1919×877 68.7 KB

6

Hi, that just made the image a quarter of the size? It’s a high-res image that has been used - it just seems to be shopify rendering it smaller, which is why it appears blurry.

7

What does it say you here:

KostiantynES_0-1746631556865.png
KostiantynES_0-1746631556865.png444×552 35.9 KB

KostiantynES_1-1746631594009.png
KostiantynES_1-1746631594009.png1863×898 48.9 KB

Also make sure that “Original size” is selected in the “Crop and transform” section of this popup.

8

Thank you so much! I changed:

block.settings.image
| image_url: width: 1500
| image_tag: sizes: sizes, widths: ‘165, 360, 535, 750, 1070, 1500’

to

block.settings.image
| image_url: width: 2000
| image_tag: sizes: sizes, widths: ‘2000’

That has worked perfectly :slightly_smiling_face: