Customize Customer Portal Design / CSS

Christian Kennedy Updated by Christian Kennedy

For developers, the Skio Customer Portal pages can be customized by using CSS styling overrides from your theme.liquid file.A styling override example can be found below (styling generates the above image).

<!-- theme.liquid -->
{% if request.path contains '/a/account' %}
    {{ 'skio-customer-portal.css | asset_url | stylesheet_tag }}
{% endif %}

Tip: Inspect the element in your browser's developer tools and right click on the element and select "Copy selector" to get the full selector for an element

/* skio-customer-portal.css */

<style>
#__next .Jea.snW.zI7.iyn.Hsu {
  display: none !important;
}

#__next .Jea.QDA.fBv.gjz.zI7.iyn.Hsu, #__next .Jea.QDA.XiG.fBv.kzZ.lnZ.sLG.wsz.zI7.iyn.Hsu .Jea.QDA.XiG.fBv.kzZ.lnZ.sLG.wsz.zI7.iyn.Hsu  {
  background-color: #fff !important;
}


#__next .ujU.zI7.iyn.Hsu .tablet-and-above:last-child .Jea.QDA.fBv.gjz.zI7.iyn.Hsu {
  box-shadow: unset !important;
}

#__next .Jea.XiG.kzZ.lnZ.sLG.wsz.zI7.iyn.Hsu, #__next .Jea.XiG.kzZ.lnZ.sLG.wsz.zI7.iyn.Hsu:hover {
  border: unset !important;
}

#__next .Jea.XiG.kzZ.lnZ.sLG.wsz.zI7.iyn.Hsu .Jea.XiG.kzZ.lnZ.sLG.wsz.zI7.iyn.Hsu, #__next .Jea.XiG.kzZ.lnZ.sLG.wsz.zI7.iyn.Hsu .Jea.XiG.kzZ.lnZ.sLG.wsz.zI7.iyn.Hsu:hover  {
  border: unset !important;
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px !important;
}

#__next .ujU.zI7.iyn.Hsu .Jea.XiG.kzZ.lnZ.sLG.wsz.zI7.iyn.Hsu:hover {
  border: unset !important;
}

#__next .ujU.zI7.iyn.Hsu .tablet-and-above:last-child {
  border: 2px solid #fff !important;
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px !important;
  border-radius: 10px !important;
}

#__next .ujU.zI7.iyn.Hsu .tablet-and-above:last-child:hover {
  border: 2px solid rgb(74, 46, 189) !important;
}

#__next .ujU.zI7.iyn.Hsu .tablet-and-above:last-child .Jea.jzS.sLG.zI7.iyn.Hsu {
  border-radius: 8px !important;
  border-bottom-right-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

#__next .ujU.zI7.iyn.Hsu .tablet-and-above:last-child .Jea.QDA.fBv.gjz.zI7.iyn.Hsu {
  border-radius: 8px !important;
  border-bottom-left-radius: 0px !important;
  border-top-left-radius: 0px !important;
}

#__next .CCY.czT.eEj.FTD.L4E.DI9.BG7 .tablet-and-above, #__next .CCY.czT.eEj.FTD.L4E.DI9.BG7 .tablet-and-above:hover {
    border-color: rgba(0,0,0,0) !important;
}

#__next h1.pBj, #__next h2.pBj, #__next h3.pBj, .nextFrost h1.pBj, .nextFrost h2.pBj, .nextFrost h3.pBj {
  color: rgb(74, 46, 189) !important;
  font-family: "Cooper BT", serif !important;
}

#__next input[name="email"]:focus {
  border-color: rgb(74,46,189)!important;
}

#__next button[style], .nextFrost button[style] {
  background: rgb(74, 46, 189) !important;
  color: #fff !important;
  font-family: "Avenir Next", sans-serif !important;
  border-color: rgb(74,46,189)!important;
}

#__next svg, .nextFrost svg, #__next svg.pBj, .nextFrost svg.pBj {
  color: rgb(74,46,189) !important;
}

#__next button[style] svg, .nextFrost button[style] svg {
  color: #fff !important;
}

#__next .c1, #__next .c0, #__next .bz, #__next .by {
  border-color: rgba(0,0,0,0)!important;
}

#__next button[aria-label="Get now"], #__next button[aria-label="Skip"], #__next button[aria-label="Set next date or edit frequency"], #__next button[aria-label="Edit products"], #__next button[aria-label="Edit info"], #__next button[aria-label="Edit payment method"], #__next button[aria-label="Apply discount code"], #__next button[aria-label="Cancel"] {
  color:rgb(74, 46, 189) !important;
  background: #fff !important;
}

#__next button[aria-label="Get now"] svg, #__next button[aria-label="Skip"] svg, #__next button[aria-label="Set next date or edit frequency"] svg, #__next button[aria-label="Edit products"] svg, #__next button[aria-label="Edit info"] svg, #__next button[aria-label="Edit payment method"] svg, #__next button[aria-label="Apply discount code"] svg, #__next button[aria-label="Cancel"] svg {
  color:rgb(74, 46, 189) !important;
}
 
@media screen and (max-width: 450px){
  .nextFrost .YDx.MIw {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80% !important;
  }
}
</style>

How did we do?

Billing window

Migration details

Contact