How can I add a slim scroll bar in under my collection list section (DAWN)

Store Design
,

Topic summary

A user seeks to add a slim horizontal scrollbar beneath their collection list section in the Dawn theme.

Initial Solution Provided:

  • Insert custom CSS code in the theme.liquid file, above the </head> tag
  • This creates a scrollbar for the collection list

Refinement Requests:
The user wants three modifications to the working solution:

  1. Limit scrollbar to collection list only (not full-screen width)
  2. Make scrollbar slimmer (approximately 5.72px height)
  3. Remove navigation arrows at the start and end

Current Status:
The basic implementation works, but awaits CSS adjustments to meet the specific styling requirements. The discussion includes screenshots showing the current full-width scrollbar and the desired slim appearance.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Like this

Screenshot 2024-09-04 150550.png
Screenshot 2024-09-04 150550.png1064×278 228 KB

2

@NOT1 , Could you kindly share your store url ?

3

Thanks : )

4

@BSSCommerce-B2B Hey are you there? :sweat_smile:

5

@NOT1 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:
6

Hey thanks it worked but can you please do some changes

  1. I dont want it full screen

NOT1_0-1725464219688.png
NOT1_0-1725464219688.png1904×132 47.7 KB

just with the collection list image sizes like this image

NOT1_0-1725464423648.png
NOT1_0-1725464423648.png1464×248 298 KB

  1. I want it more slim like 5.72 px
  2. Remove the arrows at first and last
    Thanks : )