Log in
Start free trial

Using the branding editor in Checkout Blocks

You can use the branding editor in Checkout Blocks, powered by the Checkout Branding API, to customize the aesthetics of your checkout and accounts pages without having to modify any code.

You can use the branding editor to edit the colors and checkout elements for any checkout configuration. Changes you make to your checkout design using the branding editor apply to all pages of your checkout, including the thank you page, order status page, and new customer accounts pages.

To launch the branding editor from your Shopify admin, click Sales channels > Checkout Blocks, and then click Branding editor.

On this page

Customize checkout colors

In the Colors section, you can customize the base colors of your checkout. You can also customize up to 4 color schemes that apply to individual sections when you want to make more granular edits to your design. You can edit color types, including accent colors (for interactive elements, such as links) and brand colors (used for elements such as primary and secondary buttons).

Steps:

Customize global colors
  1. From your Shopify admin, click Sales channels > Checkout Blocks.
  2. Click Branding editor.
  3. In the Colors section, click Global colors.
  4. To override any existing checkout color, in the Global colors section, click the ⊕ icon and then select the color that you want by doing either of the following actions:
    • Use the color picker to select the color.
    • Type in the HEX color code in the available field.
  5. Click Save.
Customize color schemes
  1. From your Shopify admin, click Sales channels > Checkout Blocks.
  2. Click Branding editor.
  3. In the Colors section, click Scheme 1, Scheme 2, Scheme 3, or Scheme 4 to customize a specific color scheme.
  4. Select any of the following components that you want to customize:
    • Main colors
    • Form controls
    • Primary button
    • Secondary button
  5. In the Base section, click the ⊕ icon next to the color type that you want to customize, and then select the color that you want by doing either of the following actions:
    • Use the color picker to select the color.
    • Type in the HEX color code in the available field.
  6. Optional: If you're editing the scheme for the Form controls, Primary button, or Secondary button, then you can also customize the colors for the On select or On hover interaction behavior. Click the ⊕ icon next to the color type that you want to customize, and then select the color that you want by doing either of the following actions:
    • Use the color picker to select the color.
    • Type in the HEX color code in the available field.
  7. Click Save.

Customize checkout elements

In the Customizations section of the branding editor, you can edit the following elements of your checkout:

  • Favicon: Choose the icon that displays to customers in the browser tab during checkout.
  • Global: Adjust corner radius for all elements (form inputs, buttons, and cards).
  • Header & logo: Select the header position in checkout, as well as whether to display breadcrumbs, a cart link, and a logo.
  • Main: Apply design schemes to the main content area of the checkout, including background images, border widths, and color schemes.
  • Order summary: Apply design schemes to the sidebar of the checkout containing the customer's order summary, including background images, border widths, and color schemes.
  • Footer: Select the footer width in checkout, as well as whether to display store policies.
  • Typography: Select the font size, font family, and font weight, size, kerning, and letter cases for up to 3 levels of headers.
  • Buttons: Select the padding, borders, and styles of the primary and secondary buttons.
  • Forms: Customize the styles for checkout form inputs, such as checkboxes, text fields, and selected options from a list.
  • Product thumbnails: Adjust the border and corner radius styles for product images in checkout.

Steps:

  1. From your Shopify admin, click Sales channels > Checkout Blocks.
  2. Click Branding editor.
  3. In the Customizations section, click any of the elements that you want to customize, such as Header & logo.
  4. Using the available customization options, adjust the checkout element to your preference.
  5. Click Save.

Switch checkout configurations

When you open the branding editor, you're editing the checkout configuration that's currently Live by default. However, you can change which checkout configuration that you want to edit using the branding editor, as well as create new checkout configurations.

Learn more about managing your live and draft checkout configurations.

Steps:

  1. From your Shopify admin, click Sales channels > Checkout Blocks.
  2. Click Branding editor.
  3. Click the name of the current checkout configuration to open a drop-down menu containing a list of the live configuration as well as any draft configurations, and then select the checkout configuration that you want to customize:
    • Select an existing configuration that you want to edit.
    • Click ⊕ Create new configuration to be redirected to your Shopify admin's Checkout settings.

Preview your checkout

You can preview the changes you make in the branding editor at any time by selecting the checkout configuration that you want to preview, and then clicking Preview. The checkout and accounts editor launches in a separate tab with all of your changes applied so you can preview how they display in checkout.

Steps:

  1. From your Shopify admin, click Sales channels > Checkout Blocks.
  2. Click Branding editor.
  3. Make any customizations to your checkout configuration's colors or checkout elements that you want to adjust.
  4. Click Preview.

Exporting and importing checkout configurations

You can export and import checkout configurations using JSON files.

Export a checkout configuration:

  1. From your Shopify admin, click Sales channels > Checkout Blocks.
  2. Click Branding editor.
  3. Select the checkout configuration with customizations applied to it using the branding editor.
  4. Click More actions > Export configuration.

The checkout configuration is downloaded as a .json to your local device.

Import a checkout configuration:

  1. From your Shopify admin, click Sales channels > Checkout Blocks.
  2. Click Branding editor.
  3. Select the checkout configuration that you want to apply the imported branding profile to.
  4. Click More actions > Import configuration.
  5. In the Import checkout branding dialog, upload your branding JSON file:
    1. Click Add file.
    2. Select the appropriate JSON file from your device.
    3. Click Import and continue.
  6. Review the preloaded customization configuration. Modify it as needed.
  7. Click Save.

Reset your checkout style to default

When you edit a color or checkout element using the branding editor, you can reset the specific value back to the default value by clicking Reset next to the color or element that you changed.

At any time, you can reset your entire checkout configuration branding to the Shopify default values. Resetting the checkout configuration clears all customizations across all pages of the branding editor. This action can't be undone.

Steps:

  1. From your Shopify admin, click Sales channels > Checkout Blocks.
  2. Click Branding editor.
  3. Select the checkout configuration that you want to reset.
  4. Click Reset to default.
  5. In the Reset to default styles? dialog, click Continue.
Can’t find the answers you’re looking for? We’re here to help.