We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How do I fix blurry images on mega menu?

Solved

How do I fix blurry images on mega menu?

Anya281093
Excursionist
28 0 11

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. 😫

 

IMG_4717.PNG

 

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?

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
12073 2359 2539

This is an accepted solution.

I changed this line of code in header-drawer.liquid file of your theme.

Screenshot 2024-10-03 at 15.15.19.pngScreenshot 2024-10-03 at 15.16.24.png

Related to zig zag pattern, this is the issue of your image Screenshot 2024-10-03 at 15.17.45.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 30 (30)

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

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.

Screenshot 2024-10-03 at 11.10.41.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

Thanks Dan,

 

I tried to export another image with higher width but it's still the same blurry. Ảnh màn hình 2024-10-03 lúc 10.47.08.png

 

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

I guess the code for the image automatically resizes the image to 100x. Please check and edit the code to solve it. 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

by using the code you provided above, right? Sorry, I'm not a developer.

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

No, code of your mega menu in your theme

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

is this the place I should look at? 

Ảnh màn hình 2024-10-03 lúc 11.29.04.png

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Yes, please place the code I provided to there

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

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.

WhatsApp Image 2024-10-03 at 13.13.34.jpegWhatsApp Image 2024-10-03 at 13.14.43.jpeg

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

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.

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

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.

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

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; }

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

Will this code preserve the hexagon shape of the images?

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

It will Screenshot 2024-10-03 at 14.02.54.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

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?

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

If you upload new images, they should be at least 200x 

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

Thanks Dan, let us try.

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Take your time. Have a good day! 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

Hi Dan,

 

I tried to upload a new image with more than 600px width, but the image still small.

Screenshot 2024-10-03 at 14.32.02.png

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

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 .gifScreenshot 2024-10-03 at 14.34.42.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

Hi Dan,

 

I upload it in Products -> Collections -> Bags -> Change the image. If it's not the right way, please help to guide me.

Screenshot 2024-10-03 at 14.40.09.png

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Please give me your store Collaborator request code so I can send a request for access to your theme so I can check. 

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

it's 1748

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Request sent

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

Request accepted

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Checking now

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Solved now, please check again

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

Excellent!! Thank you so much Dan, it's all good. Can I ask the cause of it so my team won't have it again in the future. And can you please check this image? It has a zig zag pattern on its side. We use the same shape for every images and this one turns out differently.
Screenshot 2024-10-03 at 15.10.39.jpeg

 

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

This is an accepted solution.

I changed this line of code in header-drawer.liquid file of your theme.

Screenshot 2024-10-03 at 15.15.19.pngScreenshot 2024-10-03 at 15.16.24.png

Related to zig zag pattern, this is the issue of your image Screenshot 2024-10-03 at 15.17.45.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Anya281093
Excursionist
28 0 11

Noted, thank you so much for helping us out! 🤗

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Glad I could help 😊!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.