How to Remove the Scrollbar from the Product Slider ?

Topic summary

A Shopify store owner encountered an unwanted horizontal scrollbar appearing on their product slider and sought a CSS solution to remove it while maintaining slider functionality.

Issue Details:

  • Horizontal scrollbar visible on product slider at draegerparis.com
  • Screenshot provided showing the scrollbar appearance
  • Goal: Hide scrollbar without breaking slider interaction

Proposed Solution:
A community member suggested adding custom CSS targeting .product-slider:

  • overflow-x: hidden !important; to hide horizontal overflow
  • scrollbar-width: none; for Firefox compatibility
  • ::-webkit-scrollbar { display: none; } for Chrome/Safari

Resolution:
The issue was resolved. The original poster confirmed finding a solution, though they didn’t specify whether they used the suggested CSS or an alternative method. Another user verified the scrollbar was no longer visible on the live site.

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

Hi everyone,

I have an issue with my product slider on Shopify. A horizontal scrollbar appears, and I want to remove it completely.

I would like to hide the scrollbar while ensuring that the slider functions correctly.

Does anyone know how to remove it using CSS or any other method?

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

Thanks in advance for your help! :blush:

It like you have solve the issue, I can’t find the horizontal line here when I check the website

@stg_herve Thanks for reaching out to the community.

In the themes settings click on customize and in the custom CSS edit the code and add the CSS below

/* Hide horizontal scrollbar /
.product-slider {
overflow-x: hidden !important;
scrollbar-width: none; /
Hide scrollbar for Firefox */
}

/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.product-slider::-webkit-scrollbar {
display: none;
}

Let me know if this work or you need more assistance.

Hello,

Yeah i found the solution.

Thank you