Header hero in mobile version (Atelier theme) is blurred. Please help!

Shopify Discussion

Topic summary

A Shopify store owner using the Atelier theme reports that their header/hero image appears blurred on mobile devices, despite working correctly on desktop.

Attempted Solutions:

  • Custom CSS code to adjust image rendering (unsuccessful)
  • Modifying the theme.liquid file before the </body> tag (unsuccessful)
  • Editing hero.liquid to change responsive image widths from '300, 450, 600, 750...' to '900, 1050, 1200...' to prevent downsizing on mobile (unsuccessful)

Key Points:

  • Shopify advisors confirmed the theme uses responsive images and doesn’t support separate desktop/mobile images
  • The issue likely stems from Shopify’s automatic image compression for mobile devices
  • One contributor suggested uploading higher resolution images, though the theme’s responsive design may still compress them

Current Status: The problem remains unresolved after multiple troubleshooting attempts. The user continues seeking help with code-based solutions.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello,

i finished setting up my website (with Atelier theme).

I dont know why my mobile version header/hero image is blurred.

Tried many ways even the shopify advisors cannot help.

Anyone have solutions? Thanks

Thanks!

IMG_0935.PNG
IMG_0935.PNG1179Ă—2556 247 KB

2 Likes
2

Mustafa_Ali_0-1750398633649.png
Mustafa_Ali_0-1750398633649.png299Ă—503 144 KB

hey @Bellayu dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

3

i find many .. is it here?

Screenshot 2025-06-20 at 13.59.00.png
Screenshot 2025-06-20 at 13.59.00.png1872Ă—1078 219 KB

still not working here.

4

Mustafa_Ali_4-1744353071236.png
Mustafa_Ali_4-1744353071236.png264Ă—149 2.5 KB

i mean this type of body tag an also follow the following step then you find it :blush:

5

Still not working :disappointed_face:

6

Can you share your page url?
So I can debug the issue.

7

how to share it? sorry i dont understand hahaha

8

Hi, I checked your site the problem is shopify by default compresses images to improve loading times but this can sometimes lead to a loss of quality and blurriness. You can upload high resolution hero image for mobile devices as most of the themes have the built in option to add seperate images for desktop and mobile.

9

i asked their advisors, they said that all is responsive. SO we cannot have separate image for desktop and mobile

10

You can edit the hero image’s liquid code to prevent the image from being responsive to small image sizes on mobile to solve it.

11

How to change it? do you have the code that i can paste?

12

You can go to your store admin > Sales channels > Online Store > Themes > click “…” in Current theme > Edit code > open hero.liquid, replace this line of code in line 12

assign widths = '300, 450, 600, 750, 900, 1050, 1200, 1350, 1500, 1650, 1800, 1950, 2000, 2500, 3000, 3500, 4000, 5000'

With this code

assign widths = '900, 1050, 1200, 1350, 1500, 1650, 1800, 1950, 2000, 2500, 3000, 3500, 4000, 5000'
13

Still not working hahaa

14

still not working. Can you please help?