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

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.

Like this

@NOT1 , Could you kindly share your store url ?

Thanks : )

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

@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:


Hey thanks it worked but can you please do some changes

  1. I dont want it full screen

just with the collection list image sizes like this image

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