Checkout Branding Customizations

Estimated reading: 6 minutes 29 views

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

Table of Contents

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.
Bernhard Modern as the Primary font and apply to main elements
  • Secondary: This font can be used for heading components or buttons if you want to use 2 different fonts on checkout page
Bodoni Poster Black as the Secondary font (for headings)

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

Leave a Comment

Share this Doc

Checkout Branding Customizations

Or copy link

CONTENTS