Customizing your brand theme and assets

Nicolas Audet
Nicolas Audet
  • Updated

Overview

The Brand section in your admin settings lets you apply your organization's visual identity across all customer-facing surfaces, including the checkout, the client portal, and communication templates. It is divided into two tabs: Theme, where you define colors, button styles, and background images, and Assets, where you upload your logo and favicon.

This article covers how to access your brand settings, every option available in the Theme tab (essential styles, checkout, and client portal), and how to manage your brand assets. Once saved, your changes are reflected in the checkout and the client portal.

 

Accessing your brand settings

Brand settings are managed from the admin settings section.

  1. Open the User Menu by clicking your Profile Avatar
  2. Select Settings
  3. Select Brand in the left navigation panel
  4. Switch between the Theme and Assets tabs at the top of the page

    Changes are only applied after clicking the Save changes button, which becomes active once a modification is made. Leaving the page with unsaved changes will display the "Discard changes" modal.

 

Theme

The Theme tab customizes the main elements of your checkout and client portal. It is divided into three sections: Essential, Checkout, and Client portal.

Every color setting works the same way: click the color swatch to open the color picker, then pick a color directly, enter a hex code, or enter RGB values (0 to 255).

 

Essential

Essential settings apply to both the checkout and the client portal.

Primary button style

Define your brand's primary button by selecting a color for each of its three states: Default, Hover, and Pressed. You can also choose a Button style from the dropdown: "Square", "Rounded", or "Pill". The button preview on the right updates as you adjust these settings, letting you validate the result before saving.

Secondary color

The Secondary background color is used for product cards, side panels, empty states, and other secondary surfaces.

 

Checkout

Background color

Select the primary background style for your checkout from the Background style dropdown:

  • "Solid fill" displays a single Background color.
  • "Gradient (vertical)" blends a Start color (top) into an End color (bottom).

Header

Choose a Header style for the checkout's header section: "Solid fill" or "Partial transparent".

Progress bar

Select the Progress bar color used to show customers their progression through the checkout flow.

Address verification background image

Upload a background image for the address verification screen, the first step customers see when checking their serviceability. A preview is displayed once the image is uploaded, and a Background overlay can be selected to improve the legibility of the content displayed over the image.

If no background image is uploaded, the checkout background style is used instead.

 

Client portal

Login background default color

Select the background color displayed behind the client portal's login screen. It is used whenever no login background image is uploaded.

Login background image

Upload an image to display behind the login screen. A preview is displayed once the image is uploaded, and the image can be removed or replaced at any time.

 

Assets

The Assets tab applies your brand assets across communication templates, the checkout, and the client portal.

Logo

Your logo is applied across the platform and all customer-facing surfaces. Once uploaded, a preview is displayed, and the logo can be removed or replaced at any time.

Favicon

The favicon is the icon displayed in the browser tab of your checkout and client portal.

 

Image requirements

All uploads must respect the following formats and file sizes. An error is displayed if the file type is invalid or the file is too large.

AssetFormatRecommended sizeMaximum file size
LogoPNG440 × 92 px200KB
FaviconPNG256 × 256 px100KB
Address verification background imagePNG or JPG1440 px minimum width1MB
Login background imagePNG or JPG1440 px minimum width1MB

Was this article helpful?

Have more questions? Submit a request