I’m pulling my hair out over this issue! I’ve set up a mega menu on my Shopify store, and the images look crisp and clear on desktop. However, on mobile, those same images become incredibly blurry like this. 
Here’s what I’ve tried so far:
- Optimized image sizes: I’ve ensured my images are large enough (at least 1024px wide) and compressed them for web use.
- Checked theme settings: I’ve explored my theme’s customization options, but I can’t find any settings specifically related to mega menu image sizes or quality.
- Cleared browser cache: No luck there.
- Tested on different devices: The blurriness persists across multiple mobile devices.
I’m using Dawn theme. Has anyone else encountered this problem? Any suggestions on how to fix it?
Hi @Anya281093
The original image width is smaller than the display. To solve this, you can add this code to Custom CSS in Online store > Themes > Customize > Theme settings.
.menu-drawer__menu img { object-fit: none; }
Or increase the original image width.
Thanks Dan,
I tried to export another image with higher width but it’s still the same blurry.
I guess the code for the image automatically resizes the image to 100x. Please check and edit the code to solve it.
by using the code you provided above, right? Sorry, I’m not a developer.
1 Like
No, code of your mega menu in your theme
is this the place I should look at?
Yes, please place the code I provided to there
Hi Dan,
I put the code as you guided but then the main menu’s images lost all the shape & the sub-menu’s images get smaller.
Our dev team checked the mega menu code if there is any codes that automatically change the image’s size to 100px, the team said they can’t find such code.
Yes, my code makes images appear in the original size it has been rendered. If you want make the same size as before then please let me know so I can send a request access to your theme to edit code of mega menu to solve image size issue.
You can update the code so that it only affects images in the child menu.
.menu-drawer__menu .menu-drawer--item_level-2 img { object-fit: none; }
Will this code preserve the hexagon shape of the images?
1 Like
Much appreciated, Dan.
Before we proceed, I want to clarify something. The images you captured show the sub-menu images smaller than I’d like. To fix this, should I upload new images with a larger width? If so, could you please suggest the ideal dimensions (width x height) for the sub-menu images?
1 Like
If you upload new images, they should be at least 200x
Take your time. Have a good day!
Hi Dan,
I tried to upload a new image with more than 600px width, but the image still small.
Where did you upload the image? Make sure you upload to the correct place because I still see it is an old image; your image is .png but an old image .gif
