How can I add a mobile-only banner to my theme's slideshow?

Store Design
,
1

Hi all

I’m struggling to edit the code for the slideshow to add a different banner that’s mobile only can anyone help?

2

Hi @KierenH

Glad to support you. please follow the steps

1: Go to online store > themes > edit code > section > slideshow.liquid

Find this code

{{ block.settings.image | image_url: width: 3840 | image_tag:
              loading: 'lazy',
              height: height,
              sizes: "100vw",
              widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
            }}

Replace with this code

Screenshot_1.png
Screenshot_1.png1060×513 19.1 KB

paste this code in schema

{
          "type": "image_picker",
          "id": "image1",
          "label": "mobile image"
        },

Screenshot_2.png
Screenshot_2.png1276×787 37 KB

@media screen and (max-width: 749px) {
    .devdesktop{
      display: none;
    }
    .devMobile{
      display: block;
    }
  }

  @media screen and (min-width: 750px) {
    .devdesktop{
      display: block;
    }
    .devMobile{
      display: none;
    }
  }

I hope this will help you .

Thanks