Currently these is no way of a Slideshow to work the same as a Hero, I want to be able to have a Slideshow with the ability to have different media on mobile and be able to select the height of the section, which also makes it easier to design media.
Until this feature is available, how can I make designs that work on both mobile and desktop? Otherwise I’ll just have to have 1 Hero at a time.
Thanks for your response, yes please as I don’t want to be limited to 1 hero until Shopify hopefully bring out the feature. I’m not fully confident in code, but can give it a go.
@Pawthena if you are not confident, I think you will be confused with the code. So I think you should hire someone or share access to it.
Hey @Pawthena ,
Shopify slideshow does not support separate mobile and desktop media natively.
The correct and reliable solution is to use responsive CSS with two images.
Step 1: Add both images in each slide
Ensure each slide has : Desktop image
Mobile image
Step 2: Update slideshow liquid code
In slideshow.liquid, wrap images like this:
Step 3: Add CSS in base.css
.mobile-img {
display: none;
}
screen and (max-width: 749px) {
.desktop-img {
display: none;
}
.mobile-img {
display: block;
}
}
Thank You !
Option 1 is to get a custom section that does what you want.
Next best option is use 2 sections, one for mobile, one for desktop, and use each custom css to hide it based on screen width.
Option 1 is always going to be your best bet. Shopify Sidekick is more than adequate to give you the entire section code and give you the instructions on what to do with it.
Hello @Pawthena.
I believe the Horizon theme has a built-in option to use separate images for mobile devices in the Hero section.
You just need to enable “Show different media on mobile” under the Mobile Media settings. Once enabled, an option to upload/select a separate mobile image should become available.
Regards
Guleria
Hi, this option is there for the Hero but not on the Slideshow currently
Sorry, my mistake.
If you can confirm the theme version you’re using, I can provide a working code solution for the slideshow that allows you to assign different images for mobile devices.
Also please confirm, you need to enable with ‘Slideshow: Insert’ or 'Slideshow: Full Frame"
Hey @Pawthena
First thing first, you need to confirm that which slideshow section you’re exactly referring to as there are more than one section that contains the word “Slideshow”. After that, I can help you out. See the attached screenshot.
Best,
Moeed
All 3 behave the same way, it’s only the banners that allow mobile and desktop media also height.
Hey @Pawthena
Follow these Steps:
_slide.liquid file in your blocks folder{% assign block_settings = block.settings %}
{%- assign block_index = section.blocks | find_index: 'id', block.id -%}
{%- assign section_index = section.index -%}
{% 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 %}
<div class="slide__image-container{% if rounded_image_corners %} slide__image-container--rounded{% 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 section_index == 1
assign fetchpriority = 'high'
endif
-%}
{%- if block_settings.media_type_1 == 'image' -%}
{%- if block_settings.mobile_image_1 != blank -%}
<picture>
<source
media="(max-width: 749px)"
srcset="
{{ block_settings.mobile_image_1 | image_url: width: 750 }} 750w,
{{ block_settings.mobile_image_1 | image_url: width: 1100 }} 1100w,
{{ block_settings.mobile_image_1 | image_url: width: 1500 }} 1500w,
{{ block_settings.mobile_image_1 | image_url: width: 2000 }} 2000w
"
sizes="100vw"
>
{{
block_settings.image_1
| image_url: width: 3840
| image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority
}}
</picture>
{%- 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 -%}
</div>
<div
class="spacing-style slide__content{% if block_settings.inherit_color_scheme == false %} color-{{ block_settings.color_scheme }}{% endif %}{% if preview_image or block_settings.toggle_overlay %} background-transparent{% endif %}"
style="{% render 'spacing-style', settings: block_settings %}"
{{ block.shopify_attributes }}
>
<div
class="group-block-content
layout-panel-flex
layout-panel-flex--{{ block_settings.content_direction }}
{% if block_settings.vertical_on_mobile %}mobile-column{% endif %}"
style="{% render 'layout-panel-style', settings: block_settings %}"
>
{% content_for 'blocks' %}
</div>
</div>
{% 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.content_direction == '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.content_direction == '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.content_direction == '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.content_direction == '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 %}
RESULT:
Best,
Moeed
Consider this solution – How to upload video on website banner for mobile and dekstop - #5 by tim_tairli – it is two sections approach – option 2 as Maximus put earlier.
The benefit of this approach is that theme code is not altered in any way.
And sidekick may be sloppy sometimes…
Hi @Pawthena
I understand the limitation with Horizon themes. By default, the built-in Slideshow section doesn’t currently offer the same flexibility as the Hero section for using different media on mobile and desktop or setting custom section heights.
If you’re comfortable editing theme code, you can customize the slideshow section by modifying:
sections/slideshow.liquidblocks/_slide.liquidI’ve already modified the code for this functionality. You can download the updated files here and replace the existing files in your theme:**
Download:** Click to download file
This allows you to add separate desktop/mobile image settings and custom height controls.
Alternatively, you can use Slider Revolution & Sections app, which provides these features out of the box:
You can see how to display different images on different devices using Slider Revolution & Sections app: how to show different image on different devices
This may be a good workaround until Shopify adds these capabilities to the native Horizon slideshow section.