Customize Skio Login

Outline

• Overview
• How to customize Skio Login?
• Additional customization - for developers
• Important for developers

Overview

Similar to the Skio Customer Portal, the Skio Login can be customized to ensure that your subscription program matches your brand!

How to customize Skio Login?

The text color and background color of the "Get login code" button on the Skio Login page can be easily adjusted in the Skio app on the Customer Portal > Portal settings page (https://dashboard.skio.com/portal-settings), in the "Theme" section toward the bottom of the page; use the "Button background color" and "Button text color" inputs to change the button's appearance.

Be sure to click "Publish" at the top of the page after making any changes to ensure they are applied!

Additional customization - for developers

For developers, the Skio Login can also be customized using CSS to style any existing elements; it is usually best to add this styling directly to your store's theme.liquid file. A styling override example can be found below (styling for the "Account Login" text in the above image):

  <style>
    #__next > div:nth-child(1) > div:nth-child(2) > div > section > div > div > div > h1 {
      color: #836bee;
      font-family: "Arial";
      text-transform: uppercase;
    }
  </style>

Important for developers

The Skio Login / Customer Portal pages are rendered via the {{ content_for_layout }} Liquid variable in the `layout/theme.liquid` file in your store's Theme codebase. To add any element above or below the Skio Login / Customer Portal, or to conditionally include CSS / JS / Liquid files only on Skio-specific pages, place the following Liquid logic above or below the {{ content_for_layout }} variable:

{% if request.path contains '/a/account' %}
<!-- your element / text / file include here -->
{% endif %}