Need help: hide scrollbar on desktop but keep slider working

Store Design
, , ,
1

Hi everyone,

I have a slider section on my Shopify store that works with navigation buttons (not dragging). I’m trying to hide the scrollbar for a cleaner look

Has anyone dealt with this before? I’d really appreciate some help or guidance on how to hide the scrollbar without breaking the slide effect.

stg_herve_0-1743772299440.png
stg_herve_0-1743772299440.png1915×807 167 KB

The website : https://www.draegerparis.com/

Thanks a lot in advance!

2

Hey @stg_herve

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1743772709306.png
Moeed_0-1743772709306.png1883×907 161 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Yes, you can hide the scrollbar without affecting the functionality. Add this to the section setting “Custom CSS”

.slider {
  scrollbar-width: none;
  padding-bottom: 0;
}

If you want to have it only on desktop, use this:

@media (min-wdth:768px){
  .slider {
    scrollbar-width: none;
    padding-bottom: 0;
  }
}