Customize Customer Login
The Skio customer portal login can be customized using CSS styling overrides from your theme.liquid file
The style block should be wrapped in this if statement below so it only renders on the skio login page
theme.liquid
{% if request.path == '/a/account/login' %}
<style>
...
</style>
{% endif %}
Since we use Next.js, most of the class names are optimized and reused which can make selecting the elements difficult to select.
Open Devtools -> Find the element -> Right click -> "Copy" -> "Copy selector"
This is an easy way to get a much more specific selector
theme.liquid
{% if request.path == '/a/account/login' %}
<style>
#__next > div:nth-child(1) > div:nth-child(3) > div > section > div > div > div.kKU.zI7.iyn.Hsu > h2 {
text-transform: uppercase;
font-weight: 600;
}
#email {
border-color: rgb(136, 106, 246) !important;
border-top-width: 0 !important;
border-left-width: 0 !important;
border-right-width: 0 !important;
border-radius: 0 !important;
}
#__next > div:nth-child(1) > div:nth-child(3) > div > section > div > div > form > div > div > div:nth-child(2) > div > div > div > div > button {
border-radius: 0 !important;
background-color: rgb(136, 106, 246) !important;
}
</style>
{% endif %}
Last modified 9mo ago