Customize Skio Customer Portal Elements / CSS

Outline

• Overview
• Banner Image
• Additional customization
• Theme colors
• Important for developers

Overview

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

NOTE: The Skio Customer Portal does not support white text at this time.

Banner Image

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 first screenshot) 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 the "Publish" button at the top of the page after making any changes to ensure they are applied!

Additional customization

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

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

Theme colors

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 the "Publish" button at the top of the page after making any changes to ensure they are applied!

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

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