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.

    • Related Articles

    • Custom Banner

      This feature is to create a delivery announcement at Checkout page. 1. General settings Banner Style: Choose style and color for the banner. Title: Enter your content here to announce customer about their cart. The title will be bold and different ...

    • Custom Cart

      Normally, Shopify does not allow users to change the product quantity and variant when they're on the Checkout page. So customers have to turn back to the Cart page just to adjust it, which wastes too much time and may cause them to feel too ...

    • Custom Field

      Our Custom Fields extension helps to collect more information of your customers on the checkout page, such as Delivery instructions, Customer surveys, etc. Let's explore the features of Custom Fields extension. 1. Template You can create more ...

    • Custom Plan Explanation

      Our custom plan is designed to meet the specific needs of merchants who have unique requirements for their Checkout customization. We offer a variety of options to choose from, so you can select a plan that perfectly suits your needs and budget. ...

    • How to set up multiple Custom Fields?

      You can create multiple Custom Fields forms in our Checkout Plus app. However, you only can use up to 5 Custom Fields forms in your checkout page. Each form you created will have an unique ID. You can find this Form ID after creating the form ...