Shopify Slideshows: How to Use Different Images for Desktop & Mobile

Hey everyone! As a Shopify expert who spends a lot of time digging through community discussions, one common pain point I see store owners struggle with is getting their beautiful slideshow banners to look right on both desktop and mobile. It's a classic responsive design challenge, and it popped up again in a recent thread where Gloomy was trying to figure out how to manage this for their Horizon theme. Gloomy's problem is super relatable: a 1920x700 image looks fantastic on a wide desktop screen, but cram that same wide image onto a narrow phone, and suddenly key parts are cut off. It's frustrating, right? You want your store to shine on every device, and a badly cropped hero image can really detract from that first impression.

Why Your Desktop Slideshow Images Get Cropped on Mobile

The core of the issue, as many in the thread pointed out (including itspaulnicoleson), is aspect ratio. A wide, horizontal image designed for desktop screens simply doesn't translate well to the more vertical aspect ratio of most mobile devices. Themes often try to adjust by zooming or cropping the image to fit the available space, which usually means losing important visual information.

Joshua827 chimed in, highlighting that the Horizon theme specifically doesn't have built-in separate desktop/mobile image pickers for its slideshow section, unlike the 'Hero' section. This is a crucial distinction. If you only need one main banner, Ploqo wisely suggested just using the 'Hero' section, as it already includes a "Show different media on mobile" option. That's a quick win if a single banner suffices!

Common Workarounds (And Why They're Not Always Ideal)

Before diving into a cleaner solution, it's worth touching on some workarounds mentioned. Maximus3 linked to a couple of discussions, one from tim_tairli, suggesting a method of running two separate slideshow sections and hiding one with custom CSS based on screen size (e.g., hiding desktop above 750px and mobile below 750px). Joshua827 also used this method, but honestly, as he put it, it's "just a pain when you change slides and forget the other one."

And he's right! While technically functional, managing two identical slideshows (one for desktop, one for mobile) means double the work every time you update content. It's not the most efficient or maintainable approach, and that's exactly what devcoders emphasized: a much cleaner solution would be to modify the theme to add a separate mobile image picker directly to each slide.

The Clean Solution: Customizing Your Horizon Slideshow for Mobile Images

This is where Ploqo came in with a fantastic, detailed solution that the community, including Gloomy and ST2026, found worked beautifully. It involves making a couple of surgical edits to your theme's code to add a dedicated mobile image option right within the Theme Customizer. This means you can manage desktop and mobile images for each slide in one place, just like the Hero section!

Before You Start: Backup Your Theme!

Seriously, this is step zero for any code edit. Always, always, duplicate your theme before making changes. That way, if anything goes awry, you can revert instantly without affecting your live store.

Step-by-Step Instructions to Add Mobile Slideshow Images:

This guide is based on Ploqo's excellent instructions for the Horizon theme. You'll be editing the blocks/_slide.liquid file.

Access Your Theme Code:
- From your Shopify admin, go to Online Store > Themes.
- Find your current theme, click the ... (Actions) button, and select Edit code.
Open blocks/_slide.liquid:
- In the file explorer on the left, navigate to the blocks folder and click on _slide.liquid to open it.

Replace the Image Rendering Code:

Find these six lines of code (Ploqo noted they are typically around line 68, but use Ctrl+F to search for media_type_1 to be sure):

      {%- if block_settings.media_type_1 == 'image' -%}
        {{
          block_settings.image_1
          | image_url: width: 3840
          | image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority
        }}

Replace them with this new block of code. This code introduces a element, allowing the browser to choose between a mobile-specific image () and the desktop image based on screen size.

      {%- capture desktop_image -%}
        {{
          block_settings.image_1
          | image_url: width: 3840
          | image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority
        }}
      {%- endcapture -%}

      {%- if block_settings.media_type_1 == 'image' -%}
        {%- if block_settings.custom_mobile_media and block_settings.image_1_mobile != blank -%}
          {% style %}
            .slide__image-container > .slide__picture {
              display: contents;
            }
            .slide__picture > .slide__image {
              position: relative;
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center center;
            }
          {% endstyle %}
          
            
            {{ desktop_image }}
          
        {%- else -%}
          {{ desktop_image }}
        {%- endif -%}

Add New Settings to the Schema:

Scroll further down in the same _slide.liquid file until you find the {% schema %} block.

Inside this block, locate the image_1 setting. Directly after it, add these two new settings. These will create the "Use a different image on mobile" checkbox and the "Mobile image" picker in your Theme Customizer.

    {
      "type": "checkbox",
      "id": "custom_mobile_media",
      "label": "Use a different image on mobile",
      "default": false,
      "visible_if": "{{ block.settings.media_type_1 == 'image' }}"
    },
    {
      "type": "image_picker",
      "id": "image_1_mobile",
      "label": "Mobile image",
      "visible_if": "{{ block.settings.media_type_1 == 'image' and block.settings.custom_mobile_media }}"
    },

Save Your Changes!
Configure in the Theme Customizer:
- Go back to your Shopify admin, then Online Store > Themes > Customize.
- Click on any slide in your slideshow. You should now see a new checkbox: Use a different image on mobile, and a Mobile image picker.

Important Troubleshooting & Best Practices:

"Color Schemes" Warning: Gloomy initially ran into a warning about "color schemes" after an edit. Ploqo quickly diagnosed this: it happens if you accidentally paste a whole file replacement meant for an older theme version. If you see this, go to your theme code editor, open blocks/_slide.liquid, and in the left TIMELINE panel, right-click a version from before your paste (or Original) and choose Restore Contents. Then, re-do only the two specific edits described above.
Mobile Image Aspect Ratio: Ploqo recommends making your mobile images roughly square, like 1080x1080 pixels. A slightly taller image (e.g., 1080x1350) might still get trimmed top and bottom, so test what works best for your content.
Performance: Don't worry about speed! Only the phone downloads the mobile-specific image file, so this change won't negatively impact your site's loading times for desktop users.
Theme Updates: Remember, if you update your Horizon theme to a new major version, you'll likely need to re-apply these code edits. Keep a record of your changes!

For those who prefer a more assisted approach, Ploqo also suggested using AI tools like ChatGPT to help merge code or Shopify Sidekick (Shopify's AI assistant in the admin panel) for guidance. And for anyone looking for video tutorials, made4Uo mentioned that searching "made4uo content desktop" on Google might lead to some free, easy-to-follow video guides.

Ultimately, having separate control over your desktop and mobile slideshow images makes a huge difference in how professional and polished your Shopify store looks on all devices. It's a bit of code, but as Gloomy and ST2026 found, it's totally achievable and worth the effort for that perfect visual presentation. This kind of community-driven solution is what makes the Shopify ecosystem so powerful – real store owners helping each other solve real problems!

Stop Mobile Cropping: Get Separate Slideshow Images for Desktop & Mobile on Shopify