Add different slideshow for Mobile

We’ve developed this feature in the Debut theme and used the existing Slick slider. So we’ll walk through this tutorial expecting you’re using Debut theme. If you’re not using Debut then we have a different solution for that. We’ll discuss that after the Debut theme tutorial.

Editing your theme code to add this feature

• In the Section directory, Create a new section with a name whatever you want but we named it specific-device-slideshow.liquid and add the code from here, basically, we’ve copied the slideshow.liquid section and modify that.
• If you’re still using old version of Debut theme which is using SCSS instead of CSS then go to the Assets directory, open theme.scss.liquid or the file which is responsible for SCSS styles and add the following code at the very bottom of the file:

.multi-slideshow-wrapper{

    .desktop-image{
      @media screen and (max-width: $grid-medium - 1) {
        display:none;
      }
    }
    .mobile-image{
      @media screen and (min-width: $grid-medium) {
        display:none;
      }
    }
}

• As Debut theme is not supporting SCSS anymore, you can add the following code to the bottom of Assets>theme.css file:

@media (max-width:749px){
  .multi-slideshow-wrapper .desktop-image{
      display:none; 
  }
}
@media (min-width:750px){
  .multi-slideshow-wrapper .mobile-image{
      display:none; 
  }
}

• Congrats you’ve completed the coding part. Now it’s available in the Themes>Customize>add section> Multi device Slideshow. Now you can add two images, one for the big device and another for small devices

Now we’ll walkthrough for a different theme

• In the Layout directory, open the theme.liquid and find the ending </head> tag and add the following slick slider cdn right above the </head> tag:

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js

• In the Asset directory, open the theme.scss.liquid and add the following code at the bottom of the file from here here or you can add CSS CDN from here. If you want to use the CDN then you have to put the CDN link to the Layout>theme.liquid file before the </head> tag.
• In the Sections directory, create a new file and name it whatever you want and add the following code from here.
• Congrats you’ve completed the coding part. Now it’s available in the Themes>Customize>add section> Multi device Slideshow. Now you can add two images, one for the big device and another for small devices

Enjoy this feature. 🙂