Skip to main content

Use the GraphiQL app

Plus

Checkout styling customizations are available only to Shopify Plus merchants.

If you want to change advanced branding settings for your checkout or customer account pages, you have a few options.

You can install branding editor apps from the Shopify App Store that let you manage advanced brand settings through an easy-to-use interface. These apps often provide more customization features beyond the Checkout and Accounts Editor.

If you want more control, you can use the Shopify GraphiQL app to edit your branding settings directly through the GraphQL Admin API. This method is best if you're comfortable with technical tools.

Anchor to What you'll learnWhat you'll learn

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

  • Retrieve your store's checkout and accounts configuration ID.
  • View your current checkout and customer accounts branding settings.
  • Update branding settings using a mutation.

Anchor to RequirementsRequirements

  • Your store is on the Shopify Plus plan.
  • You've installed the Shopify GraphiQL app on your store with the read_checkout_and_accounts_configurations and write_checkout_and_accounts_configurations access scopes.
  • You're using API version 2026-04 or higher.

Anchor to Step 1: Open the Shopify GraphiQL appStep 1: Open the Shopify GraphiQL app

  1. In the Shopify admin, go to Apps.
  2. Select Shopify GraphiQL App from your list of installed apps.

Anchor to Step 2: Find your configuration IDStep 2: Find your configuration ID

You need the configuration ID to ensure your updates are applied to the correct configuration.

In the main editor area in the Shopify GraphiQL app, paste the following query:

Shopify GraphiQL app

GraphQL query

query checkoutAndAccountsConfigurations {
checkoutAndAccountsConfigurations(first: 100) {
edges {
node {
id
isPublished
}
}
}
}

JSON response

{
"data": {
"checkoutAndAccountsConfigurations": {
"edges": [
{
"node": {
"id": "gid://shopify/CheckoutAndAccountsConfiguration/123456789",
"isPublished": true
}
}
]
}
}
}
  1. Leave the Variables panel empty.
  2. Click Run.
  3. In the results, find the id for the checkout and accounts configuration that you want to view or update. Look for isPublished: true to identify your published configuration.

Anchor to Step 3: View branding settingsStep 3: View branding settings

Paste the following query in the main editor area to check your checkout's base font size and scale ratio:

Shopify GraphiQL app

GraphQL query

query brandingProfile {
checkoutAndAccountsConfiguration(id: "YOUR_CONFIGURATION_ID") {
branding {
designTokens {
typography {
size {
base
ratio
}
}
}
}
}
}

JSON response (customized)

{
"data": {
"checkoutAndAccountsConfiguration": {
"branding": {
"designTokens": {
"typography": {
"size": {
"base": 18,
"ratio": 1.2
}
}
}
}
}
}
}

JSON response (default)

{
"data": {
"checkoutAndAccountsConfiguration": {
"branding": {
"designTokens": {
"typography": null
}
}
}
}
}
  1. Replace YOUR_CONFIGURATION_ID with the full id value from Step 2 (for example, gid://shopify/CheckoutAndAccountsConfiguration/123456789).
  2. Leave the Variables panel empty.
  3. Click Run to view your results.

Anchor to How to read your resultsHow to read your results

After you've customized your font size or ratio as described above, you'll see the values you set in the branding.designTokens response (see JSON response (customized) above). For all other branding settings that you haven't customized the API returns null (see JSON response (default) above).

Anchor to Step 4: Update branding settingsStep 4: Update branding settings

To update any branding setting, use the checkoutAndAccountsConfigurationUpdate mutation and the Variables panel.

Anchor to Example: Change primary button corner radiusExample: Change primary button corner radius

Paste the mutation in the main editor area, and the variables in the Variables panel below it:

Shopify GraphiQL app

GraphQL mutation

mutation checkoutAndAccountsConfigurationUpdate($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
configuration {
branding {
designTokens {
cornerRadius {
large
}
}
components {
primaryButton {
cornerRadius
}
}
}
}
userErrors {
field
message
}
}
}

Variables

{
"id": "YOUR_CONFIGURATION_ID",
"configuration": {
"branding": {
"designTokens": {
"cornerRadius": {
"large": 32
}
},
"components": {
"primaryButton": {
"cornerRadius": "LARGE"
}
}
}
}
}
Note

For primaryButton.cornerRadius settings, only "NONE", "SMALL", "BASE", or "LARGE" are valid sizes. Define the pixel value for each size under designTokens.cornerRadius in your branding configuration, and then refer to the keyword for the element that you want to update.

The designTokens.cornerRadius values are shared across all components. For example, updating the large value here also affects any other component that uses the LARGE corner radius.

  1. Replace YOUR_CONFIGURATION_ID with the full id value from Step 2 (for example, gid://shopify/CheckoutAndAccountsConfiguration/123456789).
  2. Click Run to apply the update.

Your primary checkout button now uses more rounded corners.

Anchor to More optionsMore options

The GraphQL Admin API supports hundreds of branding settings that can be updated following the same steps in this guide. For a complete list, including colors, spacing, and buttons, check the GraphQL Admin API reference for checkout and accounts configuration. You can also use the .dev Assistant to help build GraphQL queries and mutations for your specific use case.

Anchor to Next stepsNext steps

Now that you know how to use the GraphiQL app, you can explore the GraphQL Admin API to learn more about the many customization options, or follow one of the guides below:

Customize typography

Learn how to apply different font types and other typographical customizations to checkout.

Add the favicon

Learn how to add the favicon to display at checkout.

Customize form controls

Learn how to customize form controls such as borders and label positions, button styles, and corner radii.

Update color settings

Learn how to design and apply a color system.

Customize sections

Learn how to style the sections on checkout pages.

Was this page helpful?