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

Solved
AmyChacon
Excursionist
15 0 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;
}

0 Likes
g33kgirl
Shopify Partner
321 95 113

@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

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
g33kgirl
Shopify Partner
321 95 113

This is an accepted solution.

@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;
}

  

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
AmyChacon
Excursionist
15 0 1

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.

 

 

0 Likes