How to set separate slideshow images for mobile and desktop?

[Anjuhere]

Hii,
I’m looking to set 2 different images in my slideshow (not in banner), for mobile and desktop and I am using sense them. I have designed images in Canva for both screens.
Currently, it follows the same image on both screens which is not good:

but I want to use this image for my mobile screen.

[Dan-From-Ryviu]

Hi @Anjuhere
Please just add image to 2 slides, slide 1 is image for desktop and slide 2 is image for mobile. After that, please add this code to Custom CSS of Slideshow section

.slideshow__slide { display: none !important; }
@media screen and (min-width: 768px;) {
.slideshow .slideshow__slide:first-child { display: flex !important; }
}
@media screen and (max-width: 767px;) {
.slideshow .slideshow__slide:nth-child(2) { display: flex !important; }
}

[Anjuhere]

sorry i am unable to understand, where I have to add images?

[Ravijalan]

To display different images in your slideshow for mobile and desktop using the Sense theme, you’ll need to utilize media queries and custom coding in your theme’s Liquid and CSS files. Here’s a step-by-step guide to achieving this:

1. Make sure you have two sets of images ready - one optimized for mobile and the other for desktop.

2. In your Shopify admin, go to online store > themes. Find your current theme and click on actions then select edit code.

3. Locate the section responsible for your slideshow in the theme files. It often has a name like slideshow.liquid or similar.

4. Inside the slideshow section file, you’ll want to use CSS media queries to target different screen sizes

5. /* For Mobile */
   @media (max-width: 768px) {
   .slideshow-image {
   background-image: url(‘mobile-image.jpg’);
   }
   }

   /* For Desktop */
   @media (min-width: 769px) {
   .slideshow-image {
   background-image: url(‘desktop-image.jpg’);
   }
   }

6. replace mobile-image.jpg and desktop-image.jpg with the desired file path, save and test

[Dan-From-Ryviu]

If you have multiple images for mobile and desktop then please create 2 Slideshow sections, one section add images of desktop, one section display images of mobile and then add those code instead

In custom CSS of slideshow for desktop, add this cod e

@media screen and (max-width: 767px) {
  slideshow-component {
    display: none !important;
  }
}

In Custom CSS of slideshow for mobile, please add this code

@media screen and (min-width: 768px) {
  slideshow-component {
    display: none !important;
  }
}

[Anjuhere]

I am using sense theme and there is no such option here.

[Dan-From-Ryviu]

Go to your Online store > Themes > Customize and then you can add another Slideshow section by click + Add section and then add images for each section

[Anjuhere]

but there is no option to hide the desktop slideshow on mobile and the mobile slideshow on desktop…