Help Needed: Mobile Logo Appears Pixelated on Shopify Store (Dawn Theme)

Store Design
, , ,

Topic summary

A Shopify store owner using the Dawn theme is experiencing pixelated mobile logo display despite using a high-resolution image (500x300px). The logo renders clearly on desktop but appears blurry across all mobile devices and browsers.

Current implementation:

  • Using img_url: '100x' filter in header.liquid
  • CSS includes max-width: 100%, height: auto, and display: block
  • Image is optimized for Retina displays

Problem specifics:

  • Issue isolated to mobile view only
  • Occurs regardless of device or browser
  • Screenshots provided showing the quality degradation

Seeking guidance on:

  • Why the pixelation occurs despite proper resolution
  • Additional troubleshooting steps to resolve the display issue
  • Whether the img_url filter size or CSS properties need adjustment

The user has shared code snippets and visual examples to help diagnose the problem.

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

Hey Shopify Community,

I’ve encountered an issue with my mobile logo’s image quality on my Shopify store. Despite using a high-resolution image, the logo appears pixelated on mobile devices. I’ve tried adjusting the img_url filter size and ensured the CSS isn’t stretching the image beyond its natural dimensions, but the problem persists.

Here are the details:

  • The logo is clear on desktop.
  • The issue only appears on mobile, regardless of the device or browser used.
  • I’m using an image with sufficient resolution for Retina displays. (image size 500 x 300px)
    Aromidy Logo Black.png
    Aromidy Logo Black.png500×300 15.3 KB

This is the code snippet for the logo in my header.liquid file:

liquid

{% if template != ‘index’ %}
{{ shop.name | escape }}
{%- else -%}
{{ shop.name | escape }}
{%- endif -%}
{{ shop.name | escape }}

And the corresponding CSS:

css
.header-logo-mobile { display: block; /* shown on mobile /
margin: 0 auto; / centers the logo /
max-width: 100%; / ensures the logo is not wider than its container /
height: auto; / maintains aspect ratio */ }

Any insights on why this could be happening or further steps I could take to resolve this issue would be greatly appreciated. Thank you in advance for your help!

How it appears on mobile:

IMG_2452.PNG
IMG_2452.PNG1179×2556 179 KB

IMG_2453.PNG
IMG_2453.PNG1179×2556 302 KB

Best regards,

Kai

Website: Aromidy.com
Password: Aromidy2023