@Alric Did you ever find out how to get the two images to show up differently on mobile and desktop? I know this post is pretty old but since I am using the Brooklyn theme as well I thought I’d ask.
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-imageand.desktop-imageclasses - 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.