Style & Colors

This guide shows how to quickly and confidently brand your customer account pages by adjusting fonts, button shapes, spacing, widths and every color used across the UI. It explains grouped controls (general style, main brand color, backgrounds, menus, text, buttons, notifications) and how a single “main brand color” plus a 6-color palette can streamline styling. It also covers live-previewing changes, advanced width/padding options, and how to reset to defaults.

Ezra Miller
11 steps
2 minutes

Run

Shopify

Style & Colors Overview

Making the customer account page fit your brand and style is a key part of the C:Hub Customer Accounts Hub app, and can be done by selecting the 'Style & Colors' tab on the left side of the editor.\ \ From the style & colors tab, you're able to change all of the colors to match your brand and styling. As well as your font, button styles, account page width and more. We'll go through each section below.

General Style

The first section within 'Style & Colors', is the 'General Style' section. From here, we're able to change the: - **Font Style** - Within the font style drop down, you can select from the 'standard' default font, 'Multi-lingual Font', 'GDPR Font'. - **Corner Style** - Within the corner style drop down, you can select from 'Rounded' the default style, 'Straight' or 'Pill', which will change the styling for all buttons on the customer account. - **Menu Style** - From this drop down, you can select from the 'Spaced' default style or 'Combined' which will change the menu styling. For more advanced changes, you'll, below the menu style option a toggle, 'Advanced Style & Font'. If we toggle this on, we can also make changes to: - **Account Page Width** - Which changes the account page width (default 1200px) - **Additional Top Padding** - Which allows you to add additional padding to the top of the account page, in case you'd like to move the account page down (default 0px). - **Embedded Page Width** - This allows you to change the page with of embedded pages that load inside of the customer account. So 3rd party app pages or Shopify pages that are able to load inside of the customer account. - **Override Font Family** - This setting allows you to override the font provided in the 'Font Style' selector, to something you'd prefer.

Main Brand Color

Tip! We recommend jumping in and playing with the colors directly through the live editor. You can make changes and view them live as well as reset back to default and start again. This allows you to customise and view your changes, before saving.

In the 'Main Brand Color' section, you're able to set a main brand color, that updates colors in the customer account to streamline the styling process. When updating the: - Choose Main Brand Color The below colors will all be changed to same color: - Highlight Background - Primary Button Background Below the 'Choose Main Brand Color' selector, you also have a 'Brand Palette' where you can save up to 6 colors, for easy access to your brand colors and their hex values.

Page & Widget Colors

Inside of the 'Page and Widget Colors' section, the first option you'll see are the buttons: - **Set colors for Light theme** - To set the colors for a light theme (which is set by default) - **Set colors for Dark theme** - To set the colors for a dark theme

Background Colors

The next section is the 'Background Colors', which allows you to change the color of: - **Page Background** - Changes the entire pages background - **Content Background** - Changes the background color of orders, the customer card, profile page fields and saved addresses - **Muted Background** - Changes the color of pending order status' as well as partially refunded status' and any other muted backgrounds. - **Highlight Background** - Changes the outline of the search bar on the orders page - **Body Background** - Changes the background color of any field added to the customer card

Menu Colors

The next section is the 'Menu Colors', which allows you to change the color of: - Menu Background - Changes the background color of the non-selected menu tabs - Menu Text - Changes the color of the text on non-selected menu tabs - Active Menu Background - Changes the color of the background for the active/selected menu tab - Active Menu Text - Changes the color of the text for active/selected menu tab

Text Colors

The next section is the 'Text Colors', which allows you to change the color of: - Primary Text Color - Changes the primary text color for all text not handled by other color selectors - Muted Text Color - Changes the muted text color for pending status and partially fulfilled status, as well as any other muted text color

Button Colors

The next section is the 'Button Colors', which allows you to change the color of: - Primary Button Background -Changes the background color of primary buttons like 'pay now' and 'buy it again' as well as any other primary buttons - Primary Button Text - Changes the text color of primary buttons text like 'pay now' and 'buy it again' as well as any other primary buttons text - Secondary Button Background - Changes the background color of secondary buttons like 'track order' as well as any other secondary buttons - Secondary Button Text - Changes the text color of secondary buttons text like 'track order' as well as any other secondary buttons text - Muted Button & Pending Statuses - Changes the border color of buttons like 'order status' as well as changes the color of product quantity and other muted button colors

Account Panel Button Colors

The next section is the 'Account Panel Button Colors', which allows you to change the color of: - **Panel Button** - Changes the primary color of the account panel button - **Panel Button Icon/Text** - Changes the color of the icon, within the account panel button

Notification/Status Colors

The next section is the 'Notification/Status Colors', which allows you to change the color of: - Info Colors - Info Background - Info Fill - Info Text - Success, Paid & Fulfilled Colors - Success Background - Success Fill - Success Text - Warning & Cancelled Colors - Warning Background - Warning Fill - Warning Text - Alert/Error Colors - Alert Background - Alert Fill - Alert Text

The last option, is a button to reset all color to their default colors.