Shopify Horizon Slideshows: Mobile Images & Height Control Solutions

Hey everyone! As a Shopify migration expert and someone who spends a lot of time digging through the community forums, I often see store owners grappling with similar challenges. One common pain point that recently popped up in a great discussion, started by a user named Pawthena, was about the limitations of Shopify's native slideshow sections, especially within the newer Horizon themes.

Pawthena's core question hit home for many: Why can't the 'Slideshow' section work like the 'Hero' section, allowing for different media (images/videos) on mobile and desktop, and giving us better control over section height? It's a valid frustration – designing impactful, responsive banners is crucial for user experience and conversions, and being limited to one image that has to look good everywhere can be a real headache.

The Problem: Slideshows vs. Heroes in Horizon Themes

As Pawthena pointed out, while the 'Hero' section often gives you options like 'Show different media on mobile' and robust height controls, the 'Slideshow' sections (and there are a few, as Moeed and Guleria helped clarify, like 'Slideshow: Insert' or 'Slideshow: Full Frame') typically lack these granular settings. This means you're often left with a single image or video that stretches awkwardly or cuts off important content on smaller screens.

It's a classic example of where the native theme features, while great for simplicity, sometimes fall short for those of us who need more precise control over our storefront's aesthetics and responsiveness.

Community-Driven Solutions: What Your Peers Recommend

The beauty of the Shopify community is how quickly fellow store owners and developers jump in to offer solutions. Here's a breakdown of the clever approaches shared in the thread:

Option 1: The 'Two Sections & CSS' Approach (No Core Theme File Edits)

This solution, championed by Maximus3 and later elaborated on by Wsp and referenced by tim_tairli, is a fantastic way to achieve mobile-specific content without directly altering your theme's core Liquid files. It's often recommended for those less comfortable with heavy code modifications.

How it works: You essentially create two versions of your slideshow content – one optimized for desktop and one for mobile – and then use CSS to hide one based on the screen size.

Step-by-Step Instructions:

Duplicate Your Slideshow Section: In your Shopify theme customizer, add your 'Slideshow' section twice for each set of content you want to display. Label them clearly (e.g., 'Slideshow - Desktop' and 'Slideshow - Mobile').
Configure Each Section:
- For 'Slideshow - Desktop', upload your desktop-optimized images/videos.
- For 'Slideshow - Mobile', upload your mobile-optimized images/videos.
Add Custom CSS: You'll need to add some CSS to your theme's base.css or a similar stylesheet file (go to Online Store > Themes > Actions > Edit Code, then find your CSS file, usually under 'Assets').

Here's the CSS shared by Wsp (you'll need to assign classes like .desktop-img and .mobile-img to your slideshow sections or the images within them, depending on your theme's structure. You might need to inspect your theme's HTML to target the correct elements):

.mobile-img {
  display: none;
}

@media screen and (max-width: 749px) {
  .desktop-img {
    display: none;
  }
  .mobile-img {
    display: block;
  }
}

Pros: This method keeps your core theme files untouched, making theme updates potentially smoother. It's also a good visual way to manage content in the editor if you're comfortable with CSS.

Cons: You're duplicating content in your theme editor, which can feel a bit clunky. You also need to be precise with your CSS selectors.

Option 2: The 'Theme Code Magic' Approach (Modifying `_slide.liquid`)

This is where Moeed came in with a more integrated solution: directly modifying the _slide.liquid file to add native mobile image/video options to your slideshow blocks. This approach makes content management cleaner within the theme customizer, but it requires a bit more confidence with code.

Step-by-Step Instructions (Use with Caution & Backup!):

BACK UP YOUR THEME FIRST! Seriously, always download a duplicate of your live theme before making any code changes. This is non-negotiable.
Navigate to Theme Code: Go to Online Store > Themes > Actions > Edit Code.
Find _slide.liquid: In the file explorer on the left, look for the blocks folder and find the file named _slide.liquid.
Replace the Entire File Content: Moeed provided a comprehensive code snippet. You will replace the entire content of your existing _slide.liquid file with the code below. This code adds a new setting for a 'Mobile image' and intelligently uses a element to serve the correct image based on screen size.

{% assign block_settings = block.settings %}
{%- assign block_index = section.blocks | find_index: 'id', block.id -%}
{%- assign secti -%}

{% capture children %}
  {% liquid
    assign preview_image = block_settings.image_1
    if block_settings.media_type_1 == 'video'
      assign preview_image = block_settings.video_1.preview_image
    endif

    assign rounded_image_corners = false
    if block_settings.inherit_color_scheme == true or block_settings.inherit_color_scheme == false and section.settings.color_scheme.settings.background.rgb == block_settings.color_scheme.settings.background.rgb
      assign rounded_image_corners = true
    endif
  %}
  {% if section.settings.slide_height == 'adapt_image' and block_index == 0 and preview_image != blank %}
    {%
      # Great example of why it can be helpful for a section to be able to read the settings of its direct child blocks.
      # In this case, we want the section to be able to read the image aspect ratio of the first slide and apply it to the slideshow slides and slides.
    %}
    {% style %}
      .shopify-section-{{ section.id }} slideshow-slides,
      .shopify-section-{{ section.id }} slideshow-slide {
        min-height: {{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}vw;
      }
    {% endstyle %}
  {% endif %}

  
    {%- if block_settings.toggle_overlay -%}
      {% render 'overlay', settings: block_settings %}
    {%- endif -%}
    {%- if preview_image -%}
      {%- liquid
        assign height = preview_image.width | divided_by: preview_image.aspect_ratio | round
        assign media_width_desktop = '100vw'
        assign media_width_mobile = '100vw'
        assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
        assign lazy_sizes = 'auto, ' | append: sizes
        assign widths = '832, 1200, 1600, 1920, 2560, 3840'
      %}

      {%- liquid
        assign loading = 'lazy'

        if block_index == 0 and section_index <= 3
          assign loading = 'eager'
          assign sizes = lazy_sizes
        endif

        assign fetchpriority = 'low'
        if block_index == 0 and secti 1
          assign fetchpriority = 'high'
        endif
      -%}

      {%- if block_settings.media_type_1 == 'image' -%}
        {%- if block_settings.mobile_image_1 != blank -%}
          
            
            {{ 
              block_settings.image_1
              | image_url: width: 3840
              | image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority
            }}
          
        {%- else -%}
          {{ 
            block_settings.image_1
            | image_url: width: 3840
            | image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority
          }}
        {%- endif -%}
      {%- else -%}
        {%- if block_settings.video_1.preview_image -%}

          {{ 
            block_settings.video_1.preview_image
            | image_url: width: 3840
            | image_tag:
              height: height,
              sizes: sizes,
              widths: widths,
              loading: loading,
              class: 'slide__video-poster',
              fetchpriority: fetchpriority
          }}
        {%- endif -%}
        {{ 
          block_settings.video_1
          | video_tag: poster: nil, autoplay: true, loop: true, controls: false, muted: true, class: 'slide__video'
        }}
      {%- endif -%}
    {%- else -%}
      {%- liquid
        assign modulo_result = block_index | modulo: 2
        assign placeholder_variant = 2 | minus: modulo_result
        assign placeholder_name = 'hero-apparel-' | append: placeholder_variant
      -%}
      {{ placeholder_name | placeholder_svg_tag: 'slide__image' }}
    {%- endif -%}
  
  
    
      {% content_for 'blocks' %}
    
  
{% endcapture %}

{%- capture class -%}
  {%- if block_settings.inherit_color_scheme == false -%}
    color-{{ block_settings.color_scheme }}
  {%- endif -%}
{%- endcapture -%}

{% render 'slideshow-slide',
  index: block_index,
  class: class,
  children: children,
  attributes: block.shopify_attributes,
  slide_size: section.settings.slide_height,
  navigate_to_slide: true
%}

{% stylesheet %}
  .slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > picture {
    display: contents;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > picture > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
{% endstylesheet %}

{% schema %}
{
  "name": "t:names.slide",
  "tag": null,
  "blocks": [
    {
      "type": "_heading"
    },
    {
      "type": "button"
    },
    {
      "type": "text"
    },
    {
      "type": "group"
    },
    {
      "type": "image"
    },
    {
      "type": "video"
    },
    {
      "type": "icon"
    },
    {
      "type": "jumbo-text"
    },
    {
      "type": "@theme"
    },
    {
      "type": "@app"
    }
  ],
  "settings": [
    {
      "type": "select",
      "id": "media_type_1",
      "label": "t:settings.type",
      "options": [
        {
          "value": "image",
          "label": "t:options.image"
        },
        {
          "value": "video",
          "label": "t:options.video"
        }
      ],
      "default": "image"
    },
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "t:settings.image",
      "visible_if": "{{ block.settings.media_type_1 == 'image' }}"
    },
    {
      "type": "image_picker",
      "id": "mobile_image_1",
      "label": "Mobile image",
      "visible_if": "{{ block.settings.media_type_1 == 'image' }}"
    },
    {
      "type": "video",
      "id": "video_1",
      "label": "t:settings.video",
      "visible_if": "{{ block.settings.media_type_1 == 'video' }}"
    },
    {
      "type": "header",
      "content": "t:content.layout"
    },
    {
      "type": "select",
      "id": "content_direction",
      "label": "t:settings.direction",
      "options": [
        {
          "value": "column",
          "label": "t:options.vertical"
        },
        {
          "value": "row",
          "label": "t:options.horizontal"
        }
      ],
      "default": "column"
    },
    {
      "type": "checkbox",
      "id": "vertical_on_mobile",
      "label": "t:settings.vertical_on_mobile",
      "default": true,
      "visible_if": "{{ block.settings.c 'row' }}"
    },
    {
      "type": "select",
      "id": "horizontal_alignment",
      "label": "t:settings.alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.left"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.right"
        },
        {
          "value": "space-between",
          "label": "t:options.space_between"
        }
      ],
      "default": "flex-start",
      "visible_if": "{{ block.settings.c 'row' }}"
    },
    {
      "type": "select",
      "id": "vertical_alignment",
      "label": "t:settings.position",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.top"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.bottom"
        }
      ],
      "default": "center",
      "visible_if": "{{ block.settings.c 'row' }}"
    },
    {
      "type": "checkbox",
      "id": "align_baseline",
      "label": "t:settings.align_baseline",
      "default": false,
      "visible_if": "{{ block.settings.vertical_alignment == 'flex-end' }}"
    },
    {
      "type": "select",
      "id": "horizontal_alignment_flex_direction_column",
      "label": "t:settings.alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.left"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.right"
        }
      ],
      "default": "flex-start",
      "visible_if": "{{ block.settings.content_direction != 'row' }}"
    },
    {
      "type": "select",
      "id": "vertical_alignment_flex_direction_column",
      "label": "t:settings.position",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.top"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.bottom"
        },
        {
          "value": "space-between",
          "label": "t:options.space_between"
        }
      ],
      "default": "center",
      "visible_if": "{{ block.settings.c 'column' }}"
    },
    {
      "type": "range",
      "id": "gap",
      "label": "t:settings.gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "header",
      "content": "t:content.appearance"
    },
    {
      "type": "checkbox",
      "id": "inherit_color_scheme",
      "label": "t:settings.inherit_color_scheme",
      "default": true
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:settings.color_scheme",
      "default": "scheme-1",
      "visible_if": "{{ block.settings.inherit_color_scheme == false }}"
    },
    {
      "type": "checkbox",
      "id": "toggle_overlay",
      "label": "t:settings.media_overlay"
    },
    {
      "type": "color",
      "id": "overlay_color",
      "label": "t:settings.overlay_color",
      "alpha": true,
      "default": "#00000026",
      "visible_if": "{{ block.settings.toggle_overlay }}"
    },
    {
      "type": "select",
      "id": "overlay_style",
      "label": "t:settings.overlay_style",
      "options": [
        {
          "value": "solid",
          "label": "t:options.solid"
        },
        {
          "value": "gradient",
          "label": "t:options.gradient"
        }
      ],
      "default": "solid",
      "visible_if": "{{ block.settings.toggle_overlay }}"
    },
    {
      "type": "select",
      "id": "gradient_direction",
      "label": "t:settings.gradient_direction",
      "options": [
        {
          "value": "to top",
          "label": "t:options.up"
        },
        {
          "value": "to bottom",
          "label": "t:options.down"
        }
      ],
      "default": "to top",
      "visible_if": "{{ block.settings.toggle_overlay and block.settings.overlay_style == 'gradient' }}"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-start",
      "label": "t:settings.left",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-end",
      "label": "t:settings.right",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "t:names.slide",
      "settings": {
        "horizontal_alignment_flex_direction_column": "center",
        "inherit_color_scheme": false,
        "color_scheme": "scheme-6",
        "padding-inline-start": 48,
        "padding-inline-end": 48,
        "padding-block-start": 48,
        "padding-block-end": 48
      },
      "blocks": {
        "heading": {
          "type": "text",
          "name": "t:names.heading",
          "settings": {
            "text": "t:html_defaults.new_arrivals_h3"
          }
        },
        "text": {
          "type": "text",
          "settings": {
            "text": "t:html_defaults.latest_products",
            "padding-block-end": 20
          }
        },
        "button": {
          "type": "button",
          "settings": {
            "label": "t:text_defaults.shop_now_button_label",
            "link": "shopify://collections/all"
          }
        }
      },
      "block_order": ["heading", "text", "button"]
    }
  ]
}
{% endschema %}

After replacing the code and saving, you should see a new 'Mobile image' option appear in your slideshow block settings in the theme customizer, like this:

Pros: This provides a much more integrated and user-friendly experience within the Shopify admin. Once implemented, managing your responsive slideshows becomes as easy as uploading two images per slide. It also handles video previews and other settings more elegantly.

Cons: It involves directly editing theme Liquid files, which can be daunting if you're not comfortable with code. Future theme updates might overwrite your changes, so you'll need to re-apply them or keep track of your modifications.

When to Call in a Pro

As ProtoMan44 wisely suggested, if you're not fully confident with code, don't hesitate to hire a Shopify expert or developer. It's always better to invest in professional help than to risk breaking your store's theme. Many developers specialize in these kinds of small but impactful customizations.

Ultimately, whether you choose the 'two sections' method or dive into the code with Moeed's solution, the goal is to make your Shopify store shine on every device. Responsive design isn't just a nice-to-have anymore; it's essential for providing a seamless shopping experience and keeping your customers engaged. Kudos to Pawthena for raising this important point and to the community for stepping up with such helpful, actionable advice!

Mastering Responsive Slideshows: Get Mobile-Specific Images & Height Control on Shopify Horizon Themes

The Problem: Slideshows vs. Heroes in Horizon Themes

Community-Driven Solutions: What Your Peers Recommend

Option 1: The 'Two Sections & CSS' Approach (No Core Theme File Edits)

Step-by-Step Instructions:

Option 2: The 'Theme Code Magic' Approach (Modifying `_slide.liquid`)

Step-by-Step Instructions (Use with Caution & Backup!):

When to Call in a Pro

Explore migration tools

Mastering Responsive Slideshows: Get Mobile-Specific Images & Height Control on Shopify Horizon Themes

The Problem: Slideshows vs. Heroes in Horizon Themes

Community-Driven Solutions: What Your Peers Recommend

Option 1: The 'Two Sections & CSS' Approach (No Core Theme File Edits)

Step-by-Step Instructions:

Option 2: The 'Theme Code Magic' Approach (Modifying _slide.liquid)

Step-by-Step Instructions (Use with Caution & Backup!):

When to Call in a Pro

Explore migration tools

Option 2: The 'Theme Code Magic' Approach (Modifying `_slide.liquid`)