The branding settings allow you to customize the look and feel of your checkout experience, from colors and buttons to headers and field layouts. These tools make it easy to align your checkout design with your brand identity.
How to Access It
You can access the settings by clicking on "Edit Branding" at the top of your Checkout Editor:
Design System
Color Palette
This section allows you to adjust the colors used across your checkout, including backgrounds, buttons, and text. You can modify the following areas:
Primary Buttons – Controls the color of main action buttons (e.g., “Pay Now” or “Add”).
Interactive – Controls elements customers can interact with, such as links and input fields.
Main Body – Sets the color for the left side of the checkout page.
Secondary Body – Sets the color for the right side (order summary section).
Loading Screens – Defines the color displayed when customers perform an action that triggers a loading screen.
Critical – Controls the color of error messages or alerts displayed during checkout.
Variables
This section allows you to control the corner radius of elements throughout your checkout. The corner radius is essentially how rounded the corners appear.
You can adjust the radius for:
Small elements (ex. checkboxes)
Medium elements (ex. text or input fields)
Large elements (ex. buttons or cards)
Customizations
Buttons
This sections allows you to customize additional styling options for your primary and secondary buttons beyond color:
Variables – Define whether the button uses the small, medium, or large radius setting in the Variables section
Background – Choose between a solid color background or a transparent one.
Border – Enable or disable a border around the button.
Horizontal & Vertical Padding – Adjust the spacing around buttons.
Horizontal = left and right spacing
Vertical = top and bottom spacing
Fields
This section allows you to control the styling of all form fields, including text inputs, dropdowns, and checkboxes:
Variables – Assign the field size (small, medium, or large) in the Variables section.
Border – Toggle borders on or off.
Label Position – Choose whether the field label appears inside or above the input.
Corner Radius – Adjust how rounded the field corners appear.
Header
In this section, you can customize the position and alignment of your checkout header:
Position the header on the left or right side of the page.
Align the header text to the left, center, or right.
Order Summary
This section gives you control over the look of product images in the order summary:
Add or remove an image border.
Adjust the corner radius to make image corners more rounded or square.
Coming Soon
We have additional customization options coming soon, including:
Typography – Control font styles and weights.
Main & Global Settings – Expanded options for overall design consistency.
More details will be available when these features launch.