How can I use a different image for the phone version slideshow?

Store Design
, , ,

Topic summary

A user seeks to display different slideshow images for desktop versus mobile (phone/iPad) versions of their Shopify store. The desktop image doesn’t fit properly on mobile devices.

Current Situation:

  • Desktop image dimensions: 2744x2336
  • Desired mobile image dimensions: 1080x1080
  • Store URL provided for reference

Proposed Solution:
A respondent confirms this is achievable through custom coding using HTML, CSS, JavaScript, and Shopify’s Liquid templating language. They reference a tutorial resource for implementing responsive banner images that differ between desktop and mobile views.

Status: The discussion remains open with initial guidance provided but no implementation details yet shared.

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

URL: https://basicbastard.co/

The slideshow, I would like to use a different image for the phone version. The image on the Desktop version doesn’t fit on the phone or iPad version. I would appreciate if you can help. Thanks

Phone
Phone1080×1080 203 KB

Desktop
Desktop4472×2236 1.17 MB

1 Like
2

@basicbastardco

yes, sure you can to easy if you can easy to manage different image If you’re comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by

Desktop and Mobile