How to show different images for mobile and desktop? (Effortless Theme)

Shopify Discussion

Topic summary

A user is attempting to display different hero banner images for mobile and desktop versions of their Shopify store using the Effortless theme. They’ve tried various solutions from Shopify discussion boards without success.

Key Issues:

  • URL-based image approach failed
  • Uncertainty about proper media query syntax for displaying images based on screen width (mobile/desktop)
  • Confusion about asset management, as an asset appeared in their store despite not being uploaded to the content/assets page

Response:
Another user provided a YouTube video link, presumably offering a solution or tutorial for implementing responsive images in this theme.

The discussion remains open with the original poster seeking clarification on the correct technical approach for conditional image display.

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

I’ve tried a few of the recommendations on the Shopify discussion boards to no avail.

I only want to display different images for my hero banner on the Effortless theme.

When I attempted to use a url based image, it said I did not have that asset in my store despite it coming from my content/assets page.

What is the proper syntax for displaying specific media queries?

Display the proper image by screen width size (mobile/desktop)?

2