Custom Branding

Custom Branding

To make your Checkout Page have more brand color, Checkout Branding would help you re-style it easily.

A. Design System

1. Color 

1.1. Canvas

This color setting applies to the body background (Mostly affects top of checkout page). For example when Checkout Page loads:


  1. Background: Modify the whole background color.
  2. Foreground (Text): Modify text color.
  3. Accent (Icon & indicators): Modify icon & indicators color (if your Checkout page has).

1.2. Color 1 (Left side)

This color setting applies to the main checkout form but only on left side. For example:


  1. Background: Modify the whole background color in the left side.
  2. Foreground (Text): Modify text color in the left side.
  3. Accent (Icon & indicators): Modify icon & indicators color (if your Checkout page has).

1.3. Color 2 (Right side)

This color setting applies to the main checkout form but only on the right side. For example:


  1. Background: Modify the whole background color in the right side.
  2. Foreground (Text): Modify text color in the right side.
  3. Accent (Icon & indicators): Modify icon & indicators color (if your Checkout page has).

1.4. Primary Button

This color settings applies to the primary button such as Continue Payment, Submit payment button, and Add item button from Product Offer.


  1. Background: Modify the background color for the button.
  2. Foreground (Text): Modify text color for the button.
  3. Accent (Icon & indicators): Modify icon & indicators color.

1.5. Interactive

This color settings applies to the colors of links and interactive components. For example:


  1. Background: Modify highlight color for text.
  2. Foreground (Text): Modify tick box, text and active label border color.
  3. Accent (Icon & indicators): Modify icon & indicators color.

1.6. Critical

This color settings applies to critical information such as errors. For example:


  1. Background: Modify background color for Custom Banner extension.
  2. Foreground (Text): Modify title color for Custom Banner Extension.
  3. Accent (Icon & indicators): Modify message, critical label is missing and icon color.

2. Typography



Typography helps merchants changing the font at your Checkout page. Primary settings applies for the most components such as text, buttons or forms, while Secondary settings applies for heading.
  1. Shopify fonts collection: using your theme's font. You can modify Base Weight and Bold Weight for the text.
  2. Select your own font: You can upload your own custom font file with type .woff or .woff2. Please upload file for both Base font and Bold font so that the custom font could be applied properly.

B. Customizations

1. Global



  1. Favicon: Add an image to create a website logo for your store on Checkout Page.
  2. Corner Radius: updating..
  3. Typography: Modify font style for the whole Checkout Page.
    1. Kerning: Increase spacing between letters with 3 levels: Base, Loose, and Extra Loose.
    2. Letter Case: Transform text with 4 mode: None (normal), Lower case, Upper Case, and Title Case.

2. Buttons




2.1. Primary Button (Applies for Continue To Payment & Pay now buttons)

  1. Background style: There are two background styles for the button such as Solid with background color, and Transparent which only display border and text.
  2. Border: To set up the border line for button with two options which are None and Rounded.
  3. Block padding: To modify padding top and bottom for the button with 6 options.
  4. Inline padding: To modify padding left and right for the button with 6 options.
  5. Corner radius: To choose type of corner radius.

2.2. Secondary Button (Applies for Add item button from Product Offer)

  1. Background style: There are two background styles for the button such as Solid with background color, and Transparent which only display border and text.
  2. Border: To set up the border line for button with two options which are None and Rounded.
  3. Block padding: To modify padding top and bottom for the button with 6 options.
  4. Inline padding: To modify padding left and right for the button with 6 options.
  5. Corner radius: To choose type of corner radius.

3. Forms




3.1. Form Control (Applies all form inputs (Example: checkboxes, textfields and selects))

  1. Border: To set up the border line for button with two options which are None and Rounded.
  2. Corner radius: To choose type of corner radius.
  3. Color: Choose Color group which was created at Color section to apply for form input.
  4. Label position: There are two options: 
    1. Inside: Show the text inside the label as normal.
    2. Outside: Show the text above the label.

3.2. Checkbox (Applies to Checkbox field)

  1. Corner radius: To choose type of corner radius.

3.3. Select (Applies to Dropdown field)

  1. Border: To set up the border line for button with two options which are None, Rounded, Underline (Bottom line of Input)

3.4. TextField 

  1. Border: To set up the border line for button with two options which are None, Rounded, Underline (Bottom line of Input)
For example:



4. Header


  1. Logo: Upload your logo image to replace the Brand name as normal.
  2. Logo max width: Modify logo max width.
  3. Logo Alignment: Align logo based on the position which was set up at Logo Position option. 
  4. Logo Position: Change logo position with three options which are Checkout form (left side), Order summary (Right side), and Fullwidth (allow you to add a top banner).

5. Order Summary


  1. Border: To set up the border line for button with two options which are None and Rounded.
  2. Corner radius: To choose type of corner radius.
If you need any assistance with these settings, feel free to chat with our support team or send a ticket here. We will get back to you as soon as possible.
Let's find out the settings for Customer Portal with us to increase your customer's experience.