Shopify Slideshows: Master Mobile & Desktop Images for Your Horizon Theme

Hey there, fellow store owners! Let's talk about something that crops up (pun intended!) far too often in the Shopify community: those gorgeous hero slideshows that look absolutely perfect on your desktop but turn into a pixelated mess or a badly cropped eyesore on mobile. It's a common pain point, and I recently saw a fantastic discussion in the community that tackled this head-on for the Horizon theme. So, grab a coffee, and let's dive into how you can make your slideshows shine, no matter the device!

The Slideshow Struggle: Desktop vs. Mobile

The original question came from Gloomy, who, like many of us, was frustrated. They had a beautiful 1920x700 image for their Horizon theme's slideshow. On desktop, it was stunning. But on mobile? "The slide show cuts off," they lamented. This is because a wide, landscape image like 1920x700, when forced into a tall, narrow mobile viewport, has to either shrink dramatically or get severely cropped. Neither is ideal for showcasing your products or brand message effectively.

Itspaulnicoleson perfectly articulated the issue, noting that a wide aspect ratio image "usually gets cropped pretty heavily on mobile." What we really need, as Devcoders pointed out, is a way to have a separate mobile image picker for each slide, just like the Hero section often provides. This way, you can upload a desktop-optimized image (e.g., 1920x700) and a mobile-optimized one (perhaps a more square or vertical image, like 750x1000 or 1080x1080) and let the theme handle the rest.

Some community members, like Joshua827, have used a workaround: running two separate slideshow sections and using custom CSS to hide one at certain screen widths (e.g., hiding the desktop one below 750px and the mobile one above 750px). While this "works ok," Joshua827 rightly called it "a pain when you change slides and forget the other one." It's a maintenance headache we'd all rather avoid.

The Expert Solution: Customizing Your Theme for True Responsiveness

The best, most integrated solution, and the one that got enthusiastic confirmations from Gloomy and ST2026, came from Ploqo. It involves a bit of theme code editing, but don't worry, it's totally manageable, and the payoff is a much cleaner, more maintainable slideshow experience. This method adds a proper "Mobile image" picker directly to your slide settings in the Theme Customizer.

Before you dive into any code edits, please, please, please duplicate your theme first! This creates a backup you can easily revert to if anything goes awry. Safety first, always!

Step-by-Step: Adding Mobile Images to Your Slideshow

Here's how to implement Ploqo's brilliant solution:

1. Go to your Shopify Admin: Online Store > Themes.

   

2. Click the ... (three dots) next to your active theme and select Edit code.

3. In the files list, open blocks/_slide.liquid. You'll find it under the "Sections" or "Snippets" folder, depending on your theme's structure.

   

4. Find these six lines of code:

         {%- 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 longer block of code:

         {%- 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 -%}
   

5. Scroll down in the same _slide.liquid file until you find the {% schema %} section. Inside this section, locate the image_1 setting. It will look something like this:

       {
         "type": "image_picker",
         "id": "image_1",
         "label": "Image"
       },
   

   Right after that block, add these two new settings:

       {
         "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 }}"
       },
   

6. Click Save.

7. Now, head back to your Theme Customizer (Online Store > Themes > Customize). Click on any slide in your slideshow, and you'll see the new "Use a different image on mobile" checkbox and a "Mobile image" picker appear!

   

Important Troubleshooting Tip: The "Color Scheme" Warning

Gloomy initially ran into a "To preview your changes, color schemes must be defined..." warning after their first attempt. Ploqo quickly diagnosed this: it happens if you accidentally replace the entire _slide.liquid file with an older version that might contain `color_scheme` settings no longer compatible with your current Horizon theme (like version 4.1.5).

If you get this warning, don't panic! Here's how to fix it:

1. In the theme code editor, look for the TIMELINE panel on the left side.
2. Right-click the version from just before you made the problematic paste (or select Original if you're unsure) and choose Restore Contents. This will revert the file to a working state.
3. Now, carefully re-apply only the two specific edits (the code replacement for the image rendering and the addition of the two new schema settings) as described in steps 4 and 5 above.

Pro Tips for Your New Mobile Slideshows

• Mobile Image Dimensions: Aim for a roughly square image for your mobile slides, like 1080x1080 pixels. Since the mobile viewport is often more vertical, a square image generally fits better than a tall rectangle without excessive cropping.
• Per-Slide Control: Remember, you can set this per slide! If a particular slide's desktop image works fine on mobile, you don't need to tick the "Use a different image on mobile" checkbox for it.
• Performance Friendly: Only devices detecting as mobile will download the mobile-specific image, so this solution is efficient and won't slow down your desktop experience.
• Theme Updates: If you ever update your Horizon theme to a significantly newer version, you might need to re-apply these edits. Keep a note of them!

This kind of thoughtful customization is what truly elevates a Shopify store from good to great. By giving your customers a seamless and visually appealing experience across all devices, you're not just preventing frustration, you're building trust and encouraging sales. So go ahead, give your slideshows the mobile love they deserve! And if you're just starting your journey into e-commerce, remember that platforms like Shopify make these kinds of powerful customizations possible, helping you build a truly unique brand experience. You can start your own Shopify store today and tap into this vibrant community of experts!