In my megamenu, how do i change this image to an image that I chose on mobile?

Shopify Discussion

Topic summary

A user is experiencing issues with their Shopify megamenu where a custom image displays correctly on desktop but not on mobile. They also want product names to appear in uppercase within the megamenu.

Proposed Solution:

  • Use CSS media queries with the content: url() property to specify different images for desktop and mobile viewports
  • Apply text-transform: uppercase; to the product name class
  • Clear cache after implementing changes

Current Status:
The discussion remains open. The original poster is asking for clarification on how to locate the mobile-specific code to implement the suggested CSS solution. No confirmation yet on whether the proposed fixes have been tested or resolved the issues.

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

withaudette_0-1743858319304.png
withaudette_0-1743858319304.png359×277 12.1 KB

In my megamenu, how do i change this image to an image that I chose? I’ve changed it in code and it works on desktop but not on mobile.

Also the product name is supposed to be in all uppercase, I’m not sure how to change that for the megamenu.

www.audette.store (code:test)

2

To fix your issues:

  1. Change Image on Mobile:
    Use CSS media queries to load different images for mobile and desktop.

css
/* Desktop */
.mega-menu img {
content: url(‘path/to/desktop-image.jpg’);
}

/* Mobile */
@media (max-width: 768px) {
.mega-menu img {
content: url(‘path/to/mobile-image.jpg’);
}
}


2. Make Product Name Uppercase:
Use this CSS to force the product name to be uppercase:

css
.mega-menu .product-name {
text-transform: uppercase;
}

Check if these CSS changes work and clear your cache if needed!
3

How do I find the code for mobile here?