• What you'll learn
  • Requirements
  • Step 1: Retrieve the store's published checkout profile ID
  • Step 2: Update the base size and ratio for the design system
  • Step 3: Apply a Shopify font to primary surfaces
  • Step 4: Apply a custom font to secondary surfaces
  • Step 5: Style buttons with the secondary font
  • Step 6: Style level one headings
  • Next steps

Customize typography

Shopify Plus

Checkout styling customizations are available only to Shopify Plus merchants.

Unique typefaces and other typography customizations enable merchants to showcase their brand’s personality and style, and help to create a cohesive experience across the storefront and checkout.

This guide explains how to modify checkout typography using the GraphQL Admin API's checkout branding types and their associated fields. You'll define and use typography tokens within the design system for various elements, and style other elements directly. You'll learn some sample customizations, but you can use what you've learned to make other typography customizations.

Tip

You can reset styles to their defaults by writing parent fields to null with the GraphQL Admin API. Refer to examples of resetting some and all values to the defaults.

What you'll learn

Anchor link to section titled "What you'll learn"

In this tutorial, you'll learn how to do the following tasks:

  • Retrieve a list of your store's checkout profile IDs
  • Update the checkout design system typography's base and ratio
  • Apply a Shopify font to checkout's text and buttons
  • Upload a custom font and apply it to checkout headings
  • Customize buttons with a font that's distinct from the text
  • Customize checkout's level one headings with case, weight, and size

Requirements

Anchor link to section titled "Requirements"
  • The store that you're modifying must be on a Shopify Plus plan.
  • You've created a new development store with the Checkout and Customer Accounts Extensibility developer preview enabled.
  • You can make authenticated requests to the GraphQL Admin API.
  • You've either installed the GraphiQL app on your store or created an app, with the read_checkout_branding_settings and write_checkout_branding_settings access scopes.
  • You're using API version 2023-10 or higher.

  • You're familiar with the GraphQL Admin API's branding types.

  • Custom fonts must be in either Web Open Font Format (WOFF) or WOFF2.

  • To use licensed fonts legally, stores must have a webfont license.

Step 1: Retrieve the store's published checkout profile ID

Anchor link to section titled "Step 1: Retrieve the store's published checkout profile ID"

Checkout styling properties apply to a checkout profile ID. In this step, you'll retrieve the checkout profile to which you'll apply typography changes.

  1. Query checkoutProfiles to retrieve a list of checkout profile IDs.

    The is_published parameter indicates which checkout profile is currently applied to your store's live checkout.

  2. Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations.

Step 2: Update the base size and ratio for the design system

Anchor link to section titled "Step 2: Update the base size and ratio for the design system"

Note

Modifying the base font size and ratio proportionally adjusts associated spacing values, such as margins and padding. This ensures that relative size and space are preserved.

In this step, you'll use the checkoutBrandingUpsert mutation to update the design system's base size. You'll also update the scale ratio that's used to define all font sizes, such as what represents SMALL and LARGE:

Step 3: Apply a Shopify font to primary surfaces

Anchor link to section titled "Step 3: Apply a Shopify font to primary surfaces"

Primary surfaces include text and buttons.

Set the base font for primary surfaces with the checkoutBrandingUpsert mutation. You'll use a selection from the Shopify font library:

Step 4: Apply a custom font to secondary surfaces

Anchor link to section titled "Step 4: Apply a custom font to secondary surfaces"

Secondary surfaces include headings.

In this step, you'll upload a custom font and set it as the base font for headings:

  1. Upload the custom font using one of the following methods:
    • Using the Asset API resource
    • Through the Files section of the Shopify admin.

  2. Retrieve the ID of the generic file using the files query. The following is an example:

  3. Update the checkoutBrandingUpsert mutation with the typography data using the CheckoutBrandingTypographyInput input object.

    Replace YOUR_FILE_ID_HERE with the ID of your uploaded font file.

Tip

Fonts are a separate resource that need to be downloaded by the browser before any text is rendered, which impacts the checkout’s overall performance. To optimize the checkout for performance, consider using a system font or a font from the Shopify font library rather than a custom font.

To avoid long font load times impacting the checkout experience, use the loadingStrategy property to set how a font face is displayed based on whether and when it's downloaded and ready to use. To learn more, refer to the MDN documentation of the font-display descriptor.

The checkout page headings styled in a custom font

Step 5: Style buttons with the secondary font

Anchor link to section titled "Step 5: Style buttons with the secondary font"

Now you'll update the primary button typography to match what you set for secondary surfaces, using the checkoutBrandingUpsert mutation's customizations object:

The checkout page buttons using the same font as the headings

Step 6: Style level one headings

Anchor link to section titled "Step 6: Style level one headings"

Now you'll use the checkoutBrandingUpsert mutation's customizations object to style the level one heading typography.

The following example sets the font to large, relative to the base size and ratio, in uppercase and bold:

The checkout page with the level one heading font styled in a larger size, in uppercase and bold

Next steps

Anchor link to section titled "Next steps"
  • Explore the GraphQL Admin API to learn more about customizing checkout's typography.

On this page

  • What you'll learn
  • Requirements
  • Step 1: Retrieve the store's published checkout profile ID
  • Step 2: Update the base size and ratio for the design system
  • Step 3: Apply a Shopify font to primary surfaces
  • Step 4: Apply a custom font to secondary surfaces
  • Step 5: Style buttons with the secondary font
  • Step 6: Style level one headings
  • Next steps