--- title: Use the GraphiQL app description: >- Learn how to use the Shopify GraphiQL app to read, update, and reset advanced checkout and customer accounts branding settings. source_url: html: 'https://shopify.dev/docs/apps/build/checkout/styling/use-graphiql-app' md: 'https://shopify.dev/docs/apps/build/checkout/styling/use-graphiql-app.md' --- # Use the GraphiQL app **Plus:** Checkout styling customizations are available only to [Shopify Plus](https://www.shopify.com/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](https://apps.shopify.com/) 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](https://shopify-graphiql-app.shopifycloud.com/) to edit your branding settings directly through the GraphQL Admin API. This method is best if you're comfortable with technical tools. *** ## What 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. *** ## Requirements * Your store is on the [Shopify Plus](https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plan) plan. * You've installed the [Shopify GraphiQL app](https://shopify-graphiql-app.shopifycloud.com/login) on your store with the `read_checkout_and_accounts_configurations` and `write_checkout_and_accounts_configurations` [access scopes](https://shopify.dev/docs/api/usage/access-scopes). * You're using API version `2026-04` or higher. *** ## Step 1: Open the Shopify Graphi​QL app 1. In the Shopify admin, go to **Apps**. 2. Select **Shopify GraphiQL App** from your list of installed apps. *** ## Step 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 ```graphql query checkoutAndAccountsConfigurations { checkoutAndAccountsConfigurations(first: 100) { edges { node { id isPublished } } } } ``` ## JSON response ```json { "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. *** ## Step 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 ```graphql query brandingProfile { checkoutAndAccountsConfiguration(id: "YOUR_CONFIGURATION_ID") { branding { designTokens { typography { size { base ratio } } } } } } ``` ## JSON response (customized) ```json { "data": { "checkoutAndAccountsConfiguration": { "branding": { "designTokens": { "typography": { "size": { "base": 18, "ratio": 1.2 } } } } } } } ``` ## JSON response (default) ```json { "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. ### How 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). *** ## Step 4: Update branding settings To update any branding setting, use the [`checkoutAndAccountsConfigurationUpdate`](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutAndAccountsConfigurationUpdate) mutation and the **Variables** panel. ### Example: 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 ```graphql mutation checkoutAndAccountsConfigurationUpdate($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) { checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) { configuration { branding { designTokens { cornerRadius { large } } components { primaryButton { cornerRadius } } } } userErrors { field message } } } ``` ## Variables ```json { "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. *** ## More 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](https://shopify.dev/docs/api/admin-graphql/latest/queries/checkoutAndAccountsConfiguration). You can also use the [.dev Assistant](https://shopify.dev/docs/api?assistant=1) to help build GraphQL queries and mutations for your specific use case. *** ## Next steps Now that you know how to use the GraphiQL app, you can explore the [GraphQL Admin API](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutAndAccountsConfigurationUpdate) to learn more about the many customization options, or follow one of the guides below: [Customize typography\ \ ](https://shopify.dev/docs/apps/build/checkout/styling/customize-typography) [Learn how to apply different font types and other typographical customizations to checkout.](https://shopify.dev/docs/apps/build/checkout/styling/customize-typography) [Add the favicon\ \ ](https://shopify.dev/docs/apps/build/checkout/styling/add-favicon) [Learn how to add the favicon to display at checkout.](https://shopify.dev/docs/apps/build/checkout/styling/add-favicon) [Customize form controls\ \ ](https://shopify.dev/docs/apps/build/checkout/styling/customize-form-controls) [Learn how to customize form controls such as borders and label positions, button styles, and corner radii.](https://shopify.dev/docs/apps/build/checkout/styling/customize-form-controls) [Update color settings\ \ ](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings) [Learn how to design and apply a color system.](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings) [Customize sections\ \ ](https://shopify.dev/docs/apps/build/checkout/styling/customize-sections) [Learn how to style the sections on checkout pages.](https://shopify.dev/docs/apps/build/checkout/styling/customize-sections) ***