Display an other image-banner on mobile than on desktop (Taste Theme)

Store Design
, ,

Topic summary

A user seeks to display different image banners on mobile versus desktop in Shopify’s Taste theme, as the desktop banner appears distorted.

Initial Problem:

  • User modified the theme’s image-banner.liquid file to add a mobile image picker option
  • While the customizer now shows the mobile image field, uploading an image doesn’t display it properly

Provided Solution:
BSS-Commerce offered detailed steps:

  • Create a new section file called image-banner-mobile.liquid
  • Insert custom code (provided in full) to handle separate mobile/desktop images
  • The code includes CSS media queries and Liquid template logic for responsive image handling

Follow-up Issues:

  • Initial implementation showed both banners on mobile and desktop simultaneously
  • One user reported “missing translation” errors for the “adapt to image size” feature
  • Another encountered double slideshows on desktop and large empty spaces when deleting one banner
  • Questions arose about making the mobile banner a slideshow or hiding slide banners on mobile

Outcome:
The original poster confirmed the solution worked after retrying with the newest Taste theme version. One commenter praised it as the easiest solution to follow for beginners.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
15

This is by far my favorite solution to this problem. After reading multiple solutions, I chose this one for multiple different reasons. It was very easy for me to follow. Take into consideration I am a complete beginner at this. Thank you so much.

Best wishes,

Kristen Manaa