Customize Shopify checkout visual branding using the checkoutBrandingUpsert Admin GraphQL mutation

In-depth guide

Steps

1. Obtain a checkout profile ID by querying `checkoutProfiles { id name }` in the Admin GraphQL API; you need this ID as the required argument for the upsert
2. Call `checkoutBrandingUpsert(checkoutProfileId: $profileId, checkoutBranding: $input)` with a `CheckoutBrandingInput` object; start with the `designSystem` block to set global colors (primary, secondary, error), typography (font families, sizes), and corner radii that cascade throughout checkout
3. Customize individual checkout sections using the `customizations` block within the input — override header, footer, order summary, form controls, and buttons independently
4. To set custom fonts, first upload font files using `stagedUploadsCreate` and then reference the resulting CDN URLs in the `fontFace` configuration within `designSystem.typography`
5. Read back the applied branding with the `checkoutBranding(checkoutProfileId: $profileId)` query to verify the saved state matches your intent
6. Publish your checkout profile if it is a draft, or ensure the upserted profile is the one assigned to your online store channel