Customizing Customer Portal branding

Note

This article applies to Customer Portal v3 (CPv3). If you're using the older Customer Portal v2 (CPv2), refer to our help docs here.

Make sure you have:

• Access to your brand's color palette (hex codes)

• High-quality images for splash screens and banners (if you plan to use them)

• Desktop images in portrait orientation with a 3:4 ratio

• Mobile images in landscape orientation with a 16:9 ratio

• Banner images in SVG, PNG, JPG, or GIF format (max 800x400px)

What are the branding settings for?

Your Customer Portal branding settings let you control how the portal looks and feels for your customers. You can customize colors, borders, images, and banners to match your store’s visual identity and create a seamless brand experience.

How to access Customer Portal branding settings

1. In your Skio Dashboard, go to Customer Portal > Portal settings.

2. Click the Branding tab.

Customize portal colors

The Colors section gives you control over every color element in your portal. You can customize 15 different color properties to match your brand perfectly.

Customize borders and corners

The Borders section controls how sharp or rounded the corners appear throughout your portal.

Note

A higher corner radius creates a softer, more modern aesthetic. A lower corner radius creates a more traditional, structured look.

Add splash images to login screens

Splash images appear on the login screen when customers first access their portal. You can upload separate images for desktop and mobile devices.

Note

Using separate desktop and mobile images ensures a polished login experience across all devices.

Configure subscription banners

Subscription banners appear at the top of subscription pages to highlight special offers or important information. You can enable two types of promotional banners that Skio manages for you.

Note

Both banners are managed by Skio and update automatically based on your subscription configuration and active promotions.

Add custom banners

Custom banners let you display your own promotional images or messages at the top of the portal. You can upload different banners for desktop and mobile, and optionally link them to specific pages.

Create a custom HTML block

The Custom block section provides a code editor where you can write HTML and JavaScript. In the HTML/JS code field you can:

• Write or paste your custom HTML

• Include inline JavaScript within

Common uses for custom blocks include:

• Adding promotional messages or announcements

• Embedding third-party widgets or tools

• Creating custom UI elements

• Adding tracking pixels or analytics scripts

Note

Your custom block appears in the portal based on where you position it in the Layout section. Learn more about embedding custom blocks in our help doc here.

Add custom buttons

Custom buttons let you add clickable links to external pages or resources directly in the portal. This is useful for directing customers to help documentation, promotional pages, or other resources.

Layout

The layout interface shows all the major page elements in their current order. To reorder elements, click and hold the drag handle (six dots) next to an element.

For example, you might move Summary above Products if you want customers to see their total immediately, or place Custom Block at the top to highlight a specific message or promotion.

Add custom CSS styling

Custom CSS lets you override default portal styles with your own rules. This gives you complete control over typography, spacing, colors, and any visual element in the portal.

The CSS section provides a code editor for your custom styles. In the CSS code field you can:

• Write your CSS rules

• Target portal elements using class names or IDs

• Your styles apply globally to the entire portal

Example use cases:

• Changing font families to match your brand

• Adjusting spacing and padding for specific elements

• Overriding button styles beyond the color options in Branding

• Creating responsive layouts for specific screen sizes

Test custom CSS with specific emails

The Test emails field lets you apply your custom CSS and custom blocks to specific customer email addresses only. This is useful for testing changes before rolling them out to all customers.

In the Test emails field:

1. Enter one or more email addresses, pressing Enter after each

2. Your custom CSS and blocks apply only when these customers access the portal

3. All other customers see the portal without your custom code

When no email is entered, custom CSS and blocks apply globally to all customers.

This testing approach lets you validate your customizations with a small group before publishing them to your entire customer base.

Best practices for portal branding

• Maintain sufficient contrast. Ensure text colors have enough contrast against background colors for readability. This is especially important for buttons and links.

• Test on mobile devices. Always preview your portal on mobile after making changes. Colors and images can appear differently on smaller screens.

• Use high-quality images. Upload the highest quality splash and banner images possible within the file size limits. Blurry or pixelated images create a poor impression.

• Match your store's aesthetic. Keep your portal branding consistent with your main store. Customers should feel like they're still interacting with your brand.

• Consider accessibility. Choose color combinations that work for customers with visual impairments. High contrast and clear visual hierarchy help everyone.

#skio-root, #skio-root h1, #skio-root h2, #skio-root h3, #skio-root h4, #skio-root h5, #skio-root h6, #skio-root span, #skio-root div, #skio-root input {
    font-family: "'FONTNAMEGOESHERE'" !important;
}