How to change the color and styling on the store scrollbar? I'm using Boundless Theme but could chan

Store Design
1

Hi All, Is there a way to apply CSS or otherwise style the store/website’s vertical scrollbar?

I’m getting the usual white with gray thumb. We need black with gold thumb and rail.

Usually it would be applied something like this (only applied directly to our store page instead of to the iframe):

.merch-iframe {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.merch-iframe::-webkit-scrollbar {
width: 12px;
}

.merch-iframe::-webkit-scrollbar-track {
background: orange;
}

.merch-iframe::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}

2

@AmyChacon webkit-scrollbar works only in certain browsers like Chrome. It is not supported by Firefox and Edge. You can see here: https://caniuse.com/?search=%3A%3A-webkit-scrollbar

1 Like
3

@AmyChacon you can do something like this if you want to apply to the website itself:

::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
background: orange;
}

::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}
2 Likes
4

Hi @g33kgirl ! THank you for helping. Yes that is working. I just didn’t know that we can edit the CSS of our theme. So, I found this article from a theme provider:

https://help.stylehatch.com/article/302-adding-custom-css

That shows how to get into the Theme code editor and add the new CSS to the bottom of the theme sccs liquid asset.