Checkout Branding Customizations

Estimated reading: 6 minutes 129 views

In the Checkout Custom Design tab, you’ll discover all the options to tweak your checkout design, including fonts, colors, and logos.

Typography

You have the flexibility to choose between Shopify’s built-in fonts or upload your own.

Design System: Select or upload custom fonts

Shopify Fonts: Simply enter a name from THIS LIST to apply. For instance: Americana, Courier New, etc.
Custom Fonts: Upload font files in either .woff or .woff2 format.

Primary: This font is utilized for most components like text, buttons, and form controls.

Secondary: This font can be used for heading components or buttons if you want to use 2 different fonts on checkout page

Customization: Apply fonts to elements

After upload or choose your a custom font in the Design section, switch to the Customization section to apply fonts to elements
To apply the secondary font for headings after setting up the font selection above, navigate to Customizations > Global > Heading level 1 > Font, then change it to “Secondary“
For buttons, go to Customizations > Buttons, and switch it to “Secondary“.

Note: Some fonts cannot show up on your checkout editor but it still works on your storefront. Please click preview the checkout page for the most accurate appearance.

Color & Styles

Design System

All color settings can be found in this section
To adjust colors for background, form fields, button or text, you can find them in the tab Scheme 1 (for left column) and Scheme 2 (for right column).
If you prefer to use images for the background, you can find the settings for the left column in Customizations > Forms, and the right column in Customizations > Order summary

Text global: Color settings for global text color. You can find these color options in our UI customization (for Example)
Border radius: Value settings for the 3 options (Base/Small/Large) when choosing border radius for the forms or buttons in the Customization section.

Customization

Buttons: To change border & font options
Forms: To change border options
Header: Update logo settings and other modifications such as banner (used as a background) and other components on header
Footer: Contains settings for components on footer

HelpDesk