Customize typography with Checkout and Accounts Configuration API
Plus
Checkout styling customizations are available only to Shopify Plus merchants.
Plus:
Checkout styling customizations are available only to Shopify Plus merchants.
This guide shows how to customize typography through the Checkout and Accounts Configuration API. Typography lives under branding.designTokens.typography for the design system, and under branding.components for per-component overrides such as buttons and headings.
For an introduction to the API, see About the Checkout and Accounts Configuration API. For the equivalent guide using checkoutBrandingUpsert, see Customize typography.
Anchor to RequirementsRequirements
- You're authenticated with the GraphQL Admin API.
- Your app has access to the
read_checkout_and_accounts_configurationsandwrite_checkout_and_accounts_configurationsaccess scopes. - You have a Checkout and Accounts Configuration ID. To learn how to retrieve one, see About the Checkout and Accounts Configuration API.
Anchor to Update base size and ratioUpdate base size and ratio
POST https://{shop}.myshopify.com/api/{api_version}/graphql.json
GraphQL mutation
mutation UpdateTypography($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
configuration {
branding {
designTokens {
typography {
size { base ratio }
}
}
}
}
userErrors { field message code }
}
}
Query variables
{
"id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
"configuration": {
"branding": {
"designTokens": {
"typography": {
"size": {
"base": 16,
"ratio": 1.4
}
}
}
}
}
}
Anchor to Apply a Shopify fontApply a Shopify font
POST https://{shop}.myshopify.com/api/{api_version}/graphql.json
GraphQL mutation
mutation UpdateFonts($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
configuration { id }
userErrors { field message code }
}
}
Query variables
{
"id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
"configuration": {
"branding": {
"designTokens": {
"typography": {
"primary": {
"shopifyFontGroup": { "baseFontHandle": "assistant_n4", "boldFontHandle": "assistant_n7" }
},
"secondary": {
"shopifyFontGroup": { "baseFontHandle": "playfair_display_n4", "boldFontHandle": "playfair_display_n7" }
}
}
}
}
}
}
Anchor to Apply a custom fontApply a custom font
POST https://{shop}.myshopify.com/api/{api_version}/graphql.json
GraphQL mutation
mutation UpdateCustomFont($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
configuration { id }
userErrors { field message code }
}
}
Query variables
{
"id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
"configuration": {
"branding": {
"designTokens": {
"typography": {
"secondary": {
"customFontGroup": {
"base": {
"genericFileId": "gid://shopify/GenericFile/YOUR_FILE_ID_HERE",
"weight": 100
},
"bold": {
"genericFileId": "gid://shopify/GenericFile/YOUR_FILE_ID_HERE",
"weight": 500
}
}
}
}
}
}
}
}
Button and heading typography customizations live under branding.components:
POST https://{shop}.myshopify.com/api/{api_version}/graphql.json
GraphQL mutation
mutation UpdateComponentTypography($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
configuration {
branding {
components {
primaryButton { typography { font weight letterCase size } }
headingLevel1 { typography { size letterCase weight } }
}
}
}
userErrors { field message code }
}
}
Query variables
{
"id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
"configuration": {
"branding": {
"components": {
"primaryButton": {
"typography": {
"font": "SECONDARY",
"weight": "BOLD",
"letterCase": "UPPER",
"size": "MEDIUM"
}
},
"headingLevel1": {
"typography": {
"size": "LARGE",
"letterCase": "UPPER",
"weight": "BOLD"
}
}
}
}
}
}
Anchor to Differences from the Checkout Branding APIDifferences from the Checkout Branding API
| Checkout Branding API | Checkout and Accounts Configuration API |
|---|---|
designSystem.typography | branding.designTokens.typography |
customizations.primaryButton.typography | branding.components.primaryButton.typography |
customizations.headingLevel1.typography | branding.components.headingLevel1.typography |
Font groups: shopifyFontGroup / customFontGroup | Nested under designTokens.typography.primary / secondary. shopifyFontGroup uses baseFontHandle and boldFontHandle instead of a single name. |
Anchor to Next stepsNext steps
- Explore the GraphQL Admin API to learn more about customizing typography across checkout, customer accounts, and sign-in.
Was this page helpful?