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.
What you'll learnAnchor 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
RequirementsAnchor 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 Extensibility preview enabled.
- You've completed the GraphQL and REST Admin API getting started guide.
- You've either installed the GraphiQL app on your store or created an app, with the
- You're using API version
You're familiar with the GraphQL Admin API's branding types.
To use licensed fonts legally, stores must have a webfont license.
Step 1: Retrieve the store's checkout profile IDsAnchor link to section titled "Step 1: Retrieve the store's checkout profile IDs"
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.
checkoutProfilesto retrieve a list of checkout profile IDs.
is_publishedparameter indicates which checkout profile is currently applied to your store's live checkout.
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 systemAnchor link to section titled "Step 2: Update the base size and ratio for the design system"
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
Step 3: Apply a Shopify font to primary surfacesAnchor link to section titled "Step 3: Apply a Shopify font to primary surfaces"
Primary surfaces include text and buttons.
Step 4: Apply a custom font to secondary surfacesAnchor 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:
- Upload the custom font using one of the following methods:
Retrieve the ID of the generic file using the files query. The following is an example:
YOUR_FILE_ID_HEREwith the ID of your uploaded font file.
Step 5: Style buttons with the secondary fontAnchor 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
Step 6: Style level one headingsAnchor link to section titled "Step 6: Style level one headings"
Now you'll use the
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:
- Explore the GraphQL Admin API to learn more about customizing checkout's typography.