How to show 2 different Slideshow (One on mobile, and one on Desktop)

Store Design
, , ,

Topic summary

A user working with the Shopify Split theme (Cuber style) wants to display different slideshows for mobile versus desktop users and asks for the Custom CSS code to achieve this.

Proposed Solution:
Multiple respondents suggest creating two separate slideshow sections in the theme editor—one for desktop, one for mobile—then using CSS media queries to hide each appropriately:

  • Desktop slideshow: Hide on mobile using @media screen and (max-width: 768px) with display: none
  • Mobile slideshow: Hide on desktop using @media screen and (min-width: 769px) with display: none

Key Details:

  • Specific CSS code snippets provided target either .site-box-container or .css-slider-viewport classes
  • One respondent initially suggested an image banner approach, but clarified that slideshows and image banners are different features
  • The implementation logic remains similar across different section types

Status: The question received multiple working solutions with code examples, though minor syntax variations exist between responses (e.g., breakpoint values, typos in media query syntax).

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello for https://themes.shopify.com/themes/split/styles/cuber/preview in the Slideshow I have made two slideshows. One that should be displayed for Mobile users, and one for Desktop users.

  1. What code can I enter in Custom CSS on Desktop Slideshow to display it on Desktop, but not on Mobile.

  2. And what Custom CSS code can I put Mobile Slideshow, so that it’ll display only when viewed on mobile, but not on desktop?

Thank you everyone :slightly_smiling_face:

1 Like
2

Hey @SellingWithAlex

pls refer to image Banners for Every Device

Hope this helps.

3

Hi Sonya,

Is Image Banner and Slideshow the same thing?

4

@SellingWithAlex

No, the image banner shows only image

5

No. they are not same. but I think you can achieve your needs by the same way

6

Okay, thank you for this I guess?

My question was about the Slideshow

7

Hi @SellingWithAlex

Add two slideshow sections in your theme editor. one for mobile, one for desktop. and then using css to hide one of them.

the implement logic is the same as mentioned in the blog I shared. You can have a try:)

8

Hi @SellingWithAlex ,

  • For desktop: Please add code:
@media screen and (max-width: 768px) {
  .site-box-container {
    display: none !important;
  }
}
  • For mobile: Please add code:
@media screen and (min-width: 769px) {
  .site-box-container {
    display: none !important;
  }
}
9

Hi @SellingWithAlex

Please create 2 Slideshow sections from your theme customization, then add CSS code below for each section.

Add this code to the Custom CSS of the desktop section.

@media (max-with:749px) {
.css-slider-viewport { display: none; }
}

Add this code to the Custom CSS of the mobile section.

@media (min-with:750px) {
.css-slider-viewport { display: none; }
}
10

I have tried both of these suggestions for my issue but both slideshows show up on both desktop and mobile. How do I code so only one shows up on each platform.