Shopify themes, liquid, logos, and UX
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;
}
Solved! Go to the solution
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;
}
@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
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;
}
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024