Different images for mobile than desktop web

Store Design

Topic summary

A Shopify store owner seeks to display different banner images on mobile versus desktop views.

Initial Solution Provided:

  • Use CSS media queries with .mobile-image and .desktop-image classes
  • Hide/show images based on screen width (992px breakpoint)
  • Add both image pickers to theme schema
  • Insert corresponding HTML with class names in appropriate liquid files

Key Implementation Challenges:

  • Users struggle identifying correct liquid files (theme.liquid, banner.liquid, slideshow.liquid vary by theme)
  • Placement of <style> tags and HTML snippets differs across themes (Debut, Venture, Brooklyn, Minimal, Turbo, Boundless, etc.)
  • Schema modifications work, but HTML integration remains confusing for non-developers

Simplified Solution (Page 6):
A basic static section called “desktop-mobile-banner” with:

  • Two image pickers accessible via Customize editor
  • CSS media queries at 767px breakpoint
  • Optional link field for clickable banners
  • No optimization for different resolutions/screen widths

Ongoing Issues:

  • Page speed concerns (lazy loading suggested via lazysizes library)
  • Padding/spacing adjustments needed
  • Theme-specific implementations require custom code
  • Some users report both images displaying simultaneously
  • Request for slideshow versions with multiple slides

Status: Thread remains active with users requesting theme-specific guidance. The basic section code provides a starting point but requires customization per theme architecture.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
21

I would not worry too much about it, since images are lazy-loaded anyway.

Probably worth spending some extra time to tweak lazysizes and try with src attributes removed, but this is nit-picking – those 300x300 images are not that big to cause any delays.