Slideshow banner , wanting it to be diffrent size from desktop to mobile

Store Design
, ,

Topic summary

A store owner wants different slideshow banner sizes for desktop versus mobile devices but lacks technical experience to implement this.

Proposed Solutions:

Multiple users suggest creating two separate slideshow sections—one for desktop, one for mobile—then using CSS or custom liquid code to hide each appropriately:

  • Method 1: Add two “Custom liquid” sections with specific hide/show code snippets that control visibility based on screen size
  • Method 2: Use Custom CSS within each slideshow section with media queries (@media rules) to hide the desktop version on mobile (max-width: 749px) and the mobile version on desktop (min-width: 750px)

Current Status:

The discussion remains unresolved. The original poster attempted one solution but reported it “didn’t work” and is asking for clarification about code placement. They’ve expressed confusion about implementation, indicating they need more detailed, step-by-step guidance for their specific theme setup.

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

Is there a way where we can have 2 slideshows one for phone and one for desktop separate? :confused: I need my store to have a medium and phone to have small but its not possible i have no tech background would love help

my store is

softbeginnings.au

1 Like
2

Hey @JGBowie ,

Yes, this is possible to have two slider for your website. One will be for the Desktop and one for Mobile.

For this you need to code two slider and one will be display none for mobile and other will be for the Disappeared on Desktop.

Let me know which type of slider you like the most so that I can provide code a Slider based on your reference.

Thanks

3

You can easily do this, if your theme has “Custom liquid”/“Custom code” section.

  1. Create and configure 2 sections – one for mobile and another for desktop

  2. Add “Custom liquid section” before each of them, so that they look like:

  • Custom liquid #1 – to hide next section on Desktop
  • Mobile slideshow
  • Custom liquid #2 – to hide next section on Mobile
  • Desktop Slideshow
  1. Add this code into “Custom liquid #1”
  1. And this into “Custom liquid #2”

These codes will hide Mobile slideshow on Desktop and Desktop slideshow on Mobile.

They are universal and can be used with any type of content section – “Image banner” for example.

4

Yes I would love some help

5

I have no experience with this kind of stuff so im a bit lost

6

Sorry, bad wording from me – everything is done in theme Customize, instead of “Create and configure 2 sections” I should’ve written “Add and configure” – you need to add 2 slideshow sections, then add 2 “custom liquid sections”, nothing complex.

7

Hi @JGBowie

You can add two slideshow sections to your store admin: Sales channels > Online Store > Themes > Customize. One will be used for desktop, and the other for mobile. Then add the following code to the Custom CSS of each section.

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

@media (min-width: 750px) {
.homepage-slideshow { display: none; }
}

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

@media (max-width: 749px) {
.homepage-slideshow { display: none; }
}
8

This didnt work

9

can i just throw the code in anywhere in that file?