Solved

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

AmyChacon
Excursionist
15 0 4

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

Accepted Solution (1)

g33kgirl
Shopify Partner
390 109 142

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.

View solution in original post

Replies 3 (3)

g33kgirl
Shopify Partner
390 109 142

@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
390 109 142

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 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.