Need some help with .liquid code for different slideshow image size for desktop and mobile view

Store Design
, , , ,

Topic summary

A Shopify store owner is implementing a responsive slideshow that displays different images for desktop and mobile views.

Current Issue:
While the desktop view displays images at their full intended size, the mobile view is constrained to the desktop image dimensions rather than showing mobile-specific images at their proper size.

Attempted Solution:
The user added CSS media queries to base.css to hide/show different elements (.desk and .mob classes) based on screen width (700px and 900px breakpoints). They also shared their slideshow.liquid code, though portions appear corrupted or reversed in the post.

Goal:
Completely separate desktop and mobile image rendering so each view displays images with different aspect ratios and dimensions appropriate to the device.

Status:
The discussion remains open with the original poster acknowledging they lack the coding knowledge to implement the necessary changes and requesting assistance with editing the Liquid template code. Screenshots were provided showing the current behavior versus desired outcome.

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

Hello,

I need some help with coding. I have changed my code for slideshow.liquid to a responsive slideshow showing different images on desktop and mobile view but I’m facing 1 problem everything works and desktop view is perfectly fine the only problem is the mobile view is not showing the full image size of the file but following the image size of the desktop view is there any way I can separate them completely and show 2 different image with different sizes for desktop view and mobile view?

I have shown the full customisation page with the image and its different sizes shown on the right.

Desktop view showing full size perfectly fine

Screenshot 2024-05-16 010238.png
Screenshot 2024-05-16 010238.png1538×661 173 KB

Mobile view as you can see not showing full size

Screenshot 2024-05-16 010301.png
Screenshot 2024-05-16 010301.png1540×654 123 KB

What I’m looking for

Image Size.png
Image Size.png1540×654 108 KB

I added this to the bottom of my base.css

@media(max-width:700px){
.desk{
display:none;
}
}

@media(min-width:900px){
.mob{
display:none;
}
}

And this is the slideshow.liquid code

{{ ‘section-image-banner.css’ | asset_url | stylesheet_tag }}
{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}
{{ ‘component-slideshow.css’ | asset_url | stylesheet_tag }}

{%- if section.settings.slide_height == ‘adapt_image’ and section.blocks.first.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before,
#Slider-{{ section.id }}:not(.banner–mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
}

@media screen and (min-width: 750px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
}
{%- endstyle -%}
{%- endif -%}

<slideshow-component
class=“slider-mobile-gutter{% if section.settings.layout == ‘grid’ %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}”
role=“region”
aria-roledescription=“{{ ‘sections.slideshow.carousel’ | t }}”
aria-label=“{{ section.settings.accessibility_info | escape }}”

{%- if section.settings.auto_rotate and section.blocks.size > 1 -%}

{% render 'icon-caret' %}
{%- if section.settings.slider_visual == 'counter' -%} 1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }} {%- else -%}
{%- for block in section.blocks -%} {%- if section.settings.slider_visual == 'numbers' -%} {{ forloop.index -}} {%- else -%} {%- endif -%} {%- endfor -%}
{%- endif -%}
{% render 'icon-caret' %}

{%- if section.settings.auto_rotate -%}
<button
type=“button”
class=“slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay–paused{% endif %}”
aria-label=“{{ ‘sections.slideshow.pause_slideshow’ | t }}”

{%- render ‘icon-pause’ -%}
{%- render ‘icon-play’ -%}

{%- endif -%}

{%- for block in section.blocks -%} {{ forloop.index }} {%- endfor -%}
{%- endif -%}
{%- for block in section.blocks -%} #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after { opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }}; }
{%- if block.settings.image -%} {%- liquid assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round if section.settings.image_behavior == 'ambient' assign sizes = '120vw' assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680' else assign sizes = '100vw' assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' endif -%} {{ block.settings.image | image_url: width: 3840 | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths }} {%- else -%} {%- assign placeholder_slide = forloop.index | modulo: 2 -%} {%- if placeholder_slide == 1 -%} {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%} {%- endif -%}
{%- if block.settings.image-mob -%} {%- liquid assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round if section.settings.image_behavior == 'ambient' assign sizes = '120vw' assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680' else assign sizes = '100vw' assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' endif -%} {{ block.settings.image-mob | image_url: width: 3840 | image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths }} {%- else -%} {%- assign placeholder_slide = forloop.index | modulo: 2 -%} {%- if placeholder_slide == 1 -%} {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%} {%- endif -%}
{%- if block.settings.heading != blank -%}

{{ block.settings.heading }}

{%- endif -%} {%- if block.settings.subheading != blank -%}

{{ block.settings.subheading }}

{%- endif -%} {%- if block.settings.button_label != blank -%} {%- endif -%}
{%- endfor -%}

{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}

{% render 'icon-caret' %}
{%- if section.settings.slider_visual == 'counter' -%} 1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }} {%- else -%}
{%- for block in section.blocks -%} {%- if section.settings.slider_visual == 'numbers' -%} {{ forloop.index -}} {%- else -%} {%- endif -%} {%- endfor -%}
{%- endif -%}
{% render 'icon-caret' %}

{%- if section.settings.auto_rotate -%}
<button
type=“button”
class=“slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay–paused{% endif %}”
aria-label=“{{ ‘sections.slideshow.pause_slideshow’ | t }}”

{%- render ‘icon-pause’ -%}
{%- render ‘icon-play’ -%}

{%- endif -%}

{%- for block in section.blocks -%} {{ forloop.index }} {%- endfor -%}
{%- endif -%}

{%- if request.design_mode -%}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.slideshow.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “select”,
“id”: “layout”,
“options”: [
{
“value”: “full_bleed”,
“label”: “t:sections.slideshow.settings.layout.options__1.label”
},
{
“value”: “grid”,
“label”: “t:sections.slideshow.settings.layout.options__2.label”
}
],
“default”: “full_bleed”,
“label”: “t:sections.slideshow.settings.layout.label”
},
{
“type”: “select”,
“id”: “slide_height”,
“options”: [
{
“value”: “adapt_image”,
“label”: “t:sections.slideshow.settings.slide_height.options__1.label”
},
{
“value”: “small”,
“label”: “t:sections.slideshow.settings.slide_height.options__2.label”
},
{
“value”: “medium”,
“label”: “t:sections.slideshow.settings.slide_height.options__3.label”
},
{
“value”: “large”,
“label”: “t:sections.slideshow.settings.slide_height.options__4.label”
}
],
“default”: “medium”,
“label”: “t:sections.slideshow.settings.slide_height.label”
},
{
“type”: “select”,
“id”: “slider_visual”,
“options”: [
{
“value”: “dots”,
“label”: “t:sections.slideshow.settings.slider_visual.options__2.label”
},
{
“value”: “counter”,
“label”: “t:sections.slideshow.settings.slider_visual.options__1.label”
},
{
“value”: “numbers”,
“label”: “t:sections.slideshow.settings.slider_visual.options__3.label”
}
],
“default”: “counter”,
“label”: “t:sections.slideshow.settings.slider_visual.label”
},
{
“type”: “checkbox”,
“id”: “auto_rotate”,
“label”: “t:sections.slideshow.settings.auto_rotate.label”,
“default”: false
},
{
“type”: “range”,
“id”: “change_slides_speed”,
“min”: 3,
“max”: 9,
“step”: 2,
“unit”: “s”,
“label”: “t:sections.slideshow.settings.change_slides_speed.label”,
“default”: 5
},
{
“type”: “header”,
“content”: “t:sections.all.animation.content”
},
{
“type”: “select”,
“id”: “image_behavior”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.all.animation.image_behavior.options__1.label”
},
{
“value”: “ambient”,
“label”: “t:sections.all.animation.image_behavior.options__2.label”
}
],
“default”: “none”,
“label”: “t:sections.all.animation.image_behavior.label”
},
{
“type”: “header”,
“content”: “t:sections.slideshow.settings.mobile.content”
},
{
“type”: “checkbox”,
“id”: “show_text_below”,
“label”: “t:sections.slideshow.settings.show_text_below.label”,
“default”: true
},
{
“type”: “header”,
“content”: “t:sections.slideshow.settings.accessibility.content”
},
{
“type”: “text”,
“id”: “accessibility_info”,
“label”: “t:sections.slideshow.settings.accessibility.label”,
“info”: “t:sections.slideshow.settings.accessibility.info”,
“default”: “Slideshow about our brand”
}
],
“blocks”: [
{
“type”: “slide”,
“name”: “t:sections.slideshow.blocks.slide.name”,
“limit”: 5,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.slideshow.blocks.slide.settings.image.label”
},
{

“type”: “image_picker”,
“id”: “image-mob”,
“label”: “Mobile Image”
},
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “Image slide”,
“label”: “t:sections.slideshow.blocks.slide.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “inline_richtext”,
“id”: “subheading”,
“default”: “Tell your brand’s story through images”,
“label”: “t:sections.slideshow.blocks.slide.settings.subheading.label”
},
{
“type”: “text”,
“id”: “button_label”,
“default”: “Button label”,
“label”: “t:sections.slideshow.blocks.slide.settings.button_label.label”,
“info”: “t:sections.slideshow.blocks.slide.settings.button_label.info”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.slideshow.blocks.slide.settings.link.label”
},
{
“type”: “checkbox”,
“id”: “button_style_secondary”,
“label”: “t:sections.slideshow.blocks.slide.settings.secondary_style.label”,
“default”: false
},
{
“type”: “select”,
“id”: “box_align”,
“options”: [
{
“value”: “top-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__1.label”
},
{
“value”: “top-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__2.label”
},
{
“value”: “top-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__3.label”
},
{
“value”: “middle-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__4.label”
},
{
“value”: “middle-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__5.label”
},
{
“value”: “middle-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__6.label”
},
{
“value”: “bottom-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__7.label”
},
{
“value”: “bottom-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__8.label”
},
{
“value”: “bottom-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__9.label”
}
],
“default”: “middle-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.label”,
“info”: “t:sections.slideshow.blocks.slide.settings.box_align.info”
},
{
“type”: “checkbox”,
“id”: “show_text_box”,
“label”: “t:sections.slideshow.blocks.slide.settings.show_text_box.label”,
“default”: true
},
{
“type”: “select”,
“id”: “text_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label”
},
{
“value”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label”
},
{
“value”: “right”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label”
}
],
“default”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.label”
},
{
“type”: “range”,
“id”: “image_overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label”,
“default”: 0
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “background-1”
},
{
“type”: “header”,
“content”: “t:sections.slideshow.settings.mobile.content”
},
{
“type”: “select”,
“id”: “text_alignment_mobile”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label”
}
]
}
],
“presets”: [
{
“name”: “t:sections.slideshow.presets.name”,
“blocks”: [
{
“type”: “slide”
},
{
“type”: “slide”
}
]
}
]
}
{% endschema %}

Thanks so much for the help in advance!

2

Hey,

Thank you for the reply! Are you able to help me with editing the code as I have no clue on what to do and that’s why I posted the code.