--- title: "Customizing Customer Portal branding" slug: "customizing-customer-portal-branding-2" updated: 2026-05-20T20:25:14Z published: 2026-05-20T20:25:14Z stale: true --- > ## Documentation Index > Fetch the complete documentation index at: https://help.skio.com/llms.txt > Use this file to discover all available pages before exploring further. # Customizing Customer Portal branding > [!NOTE] > **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](/help/docs/). 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 splash images in portrait orientation (3:4 ratio recommended) - Mobile splash images in landscape orientation (16:9 ratio recommended) - All images in SVG, PNG, JPG, or GIF format (max 2MB per file) ## 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 **Storefront > Customer Portal.** 2. Click the **Branding** tab. ![](https://cdn.us.document360.io/a953bba6-c70d-43ce-bc77-d7f32a8fc514/Images/Documentation/CleanShot 2026-02-06 at 10.15.02.png) ## 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. ****All available color options**** - You can customize the following color settings in the portal: - **Brand**: Sets the primary brand color used in key UI elements. - **Background**: Controls the main background color of portal pages. - **Background Secondary**: Sets the color for cards and containers. - **Background Tertiary**: Defines the color for subtle UI components. - **Borders**: Determines the color for borders, dividers, and outlines. - **General Text**: Sets the color for body text and standard content. - **Heading Text**: Controls the color for headings and emphasized text. - **Link**: Defines the color for clickable and interactive text. - **Success**: Sets the color for success messages and confirmations. - **Primary Button Background**: Controls the background color of primary buttons. - **Primary Button Text**: Sets the text color on primary buttons. - **Secondary Button Background**: Defines the background color for secondary buttons. - **Secondary Button Text**: Controls the text color on secondary buttons. - **Focus Area**: Sets the color for focused and interactive states. ****Quick color tools**** **Shuffle colors** generates a random color palette to help you explore different combinations or get inspiration. Click **Shuffle colors** at the bottom of the **Colors** section to try it out. **Reset colors** reverts all color settings to the default Skio palette. Click **Reset colors** if you want to start over or undo changes. ## Customize borders and corners ![](https://cdn.us.document360.io/a953bba6-c70d-43ce-bc77-d7f32a8fc514/Images/Documentation/42787837211035.png) The Borders section controls how sharp or rounded the corners appear throughout your portal. ****Border strength**** The **border strength** slider controls how thick or thin borders appear around elements like buttons, cards, and containers. Drag the slider left for thinner borders or right for thicker borders. The number below the slider shows the current pixel value. ****Corner radius**** The **corner radius** slider sets how rounded the corners are on elements across the portal. Drag the slider left for sharp, square corners or right for smooth, rounded corners. The number below the slider shows the current pixel value. > [!NOTE] > 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 ![](https://cdn.us.document360.io/a953bba6-c70d-43ce-bc77-d7f32a8fc514/Images/Documentation/42787821275931.png) In the Preview section on the right, select *Login* to see how your Splash images will appear. Use the Desktop and Mobile toggles to preview the experience on each device. Splash images appear on the login screen when customers first access their portal. You can upload separate images for desktop and mobile devices. ****Desktop splash image**** The desktop splash image appears on larger screens when customers log in. 1. In the **Splash image** section, locate the **Desktop** upload area. 2. Click **Click to upload** or drag and drop your image file. 3. Use a portrait orientation image with a 3:4 ratio for best results (e.g. 600×800px). 4. Supported formats: SVG, PNG, JPG, or GIF. Max file size: 2MB. ****Mobile splash image**** The mobile splash image appears on phones and tablets when customers log in. 1. In the **Splash image** section, locate the **Mobile** upload area. 2. Click **Click to upload** or drag and drop your image file. 3. Use a landscape orientation image with a 16:9 ratio for best results (e.g. 1280×720px). 4. Supported formats: SVG, PNG, JPG, or GIF. Max file size: 2MB. > [!NOTE] > **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. ****Show 'Surprise and delight' banner**** This banner promotes special offers or rewards for subscribers. Toggle this on to display surprise-and-delight messaging in the portal. ![](https://cdn.us.document360.io/a953bba6-c70d-43ce-bc77-d7f32a8fc514/Images/Documentation/42788154329883.png) ****Show 'Volume discount' banner**** This banner highlights volume-based discounts available to customers. Toggle this on to promote volume discount opportunities. ![](https://cdn.us.document360.io/a953bba6-c70d-43ce-bc77-d7f32a8fc514/Images/Documentation/42787821280539.png) > [!NOTE] > **Note** > > Both banners are managed by Skio and update automatically based on your subscription configuration and active promotions. ## Add custom banners ![](https://cdn.us.document360.io/a953bba6-c70d-43ce-bc77-d7f32a8fc514/Images/Documentation/42787821288859.png) 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. ****Upload a desktop banner**** 1. In the **Custom banners** section, locate the **Desktop** upload area. 2. Click **Click to upload** or drag and drop your banner image. 3. Supported formats: SVG, PNG, JPG, or GIF. Max file size: 2MB. ****Upload a mobile banner**** 1. In the **Custom banners** section, locate the **Mobile** upload area. 2. Click **Click to upload** or drag and drop your banner image. 3. Supported formats: SVG, PNG, JPG, or GIF. Max file size: 2MB. ****Add a banner link (optional)**** 1. In the **Banner link (optional)** field, enter the full URL where customers should go when they click the banner. 2. Include the protocol (`https://`) in your URL. 3. **Example:** `https://demo-skio-store.myshopify.com/pages/promotions` 4. When you add a link, customers can click the banner to visit that page. Learn more about [using Quick Action links in the customer portal banner here.](/help/docs/can-i-use-quick-action-links-in-the-customer-portal-banner) ## 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](/help/docs/customizing-customer-portal-branding#layout) section. > [!WARNING] > Some JavaScript may not render in Preview mode but will still work correctly on your live site (e.g., third-party app code). ## Add custom buttons ![](https://cdn.us.document360.io/a953bba6-c70d-43ce-bc77-d7f32a8fc514/Images/Documentation/image(9).png)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. ****Enable the custom button**** In the **Custom button** section, toggle **Show custom button** on to enable it. ****Control how the button opens**** Toggle **Open in current tab**on if you want the link to open in the same tab. Leave it off to open the link in a new tab. ****Set the button label**** In the **Button label**field, enter the text that should appear on the button. ****Set the button link**** In the Button link field, enter the full URL where the button should direct customers. Example configurations: **Button label:** "View our FAQ" | **Button link**: [https://yourstore.com/pages/faq](https://yourstore.com/pages/faq) **Button label**: "Contact Support" | **Button link**: [https://yourstore.com/pages/contact](https://yourstore.com/pages/contact) **Button label**: "Shop new products" | **Button link**: [https://yourstore.com/collections/new](https://yourstore.com/collections/new) ## Layout ![](https://cdn.us.document360.io/a953bba6-c70d-43ce-bc77-d7f32a8fc514/Images/Documentation/image(50).png) 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. > [!NOTE] > Learn more about [Journey Banners here](/help/docs/how-to-trigger-a-banner-in-the-customer-portal-using-journeys). ## 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. --- ### FAQ #### Can I use my own custom fonts in the portal? Custom fonts aren't available in the Branding tab, but you can add them using custom CSS in the custom CSS section. Make sure you have your font imported into your Shopify theme and then use the following code with your font name: ```css #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; } ``` #### What happens if I don't upload splash images? The portal displays a default Skio splash screen on the login page. Customers can still access their subscriptions normally. #### Can I upload video banners? No, only static image formats (SVG, PNG, JPG, GIF) are supported for banners. Animated GIFs are supported. #### Do I need separate banners for desktop and mobile? No, you can use the same banner for both, but separate banners ensure optimal display on different screen sizes. The Customer Portal is an interface that allows subscribers to manage their subscriptions, including options to pause, modify, or cancel their subscription plans. Your Skio Dashboard is the backend view of Skio where you manage your subscription program. This is the page you see when you log in to the Skio app, and it's where you'll configure products, view customer data, adjust settings, and access analytics to monitor your subscription performance.