Customize Skio Customer Portal Elements / CSS

The Skio Customer Portal offers a variety of easy-to-use customization options to ensure that your subscription program matches your brand! This article will discuss the customization options available to all merchants via the Skio app on the Customer Portal > Portal settings page: https://dashboard.skio.com/portal-settings .

The text color, background color, and border color of certain elements (see above example) 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. Be sure to click "Save" at the top of the page after making any changes to ensure they are applied!

You can find additional information about these Color settings here: https://help.skio.com/hc/en-us/articles/16802759249307-Skio-Colors.

Any additional color / font / styling updates that are desired can be applied with frontend CSS styling in your store's Theme codebase.

Your store can also add a "Banner" image to the Skio Customer Portal (i.e. the "sell subscriptions without ripping your hair out" image in the above example) in the Skio app, on the Customer Portal > Portal settings page (https://dashboard.skio.com/portal-settings); entering an image link into the "Banner Image URL" input field will render that image in the "Banner" element! Be sure to click "Save" at the top of the page after entering the image URL.

The Skio Customer Portal offers additional customization features, such as "Add custom greeting" (see the "Hey {{first_name}}" text in the above example), "Add custom button", "Show Order Tracking", and more on the Customer Portal > Portal settings page (https://dashboard.skio.com/portal-settings)!

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