--- title: Update color settings description: Learn how to update checkout and customer accounts colors using the GraphQL Admin API. source_url: html: https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings md: https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings.md --- ExpandOn this page * [Requirements](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#requirements) * [Step 1: Retrieve the store's published checkout profile ID](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#step-1-retrieve-the-stores-published-checkout-profile-id) * [Step 2: Configure global colors](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#step-2-configure-global-colors) * [Step 3: Configure color schemes](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#step-3-configure-color-schemes) * [Step 4: Apply color schemes](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#step-4-apply-color-schemes) * [Next steps](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#next-steps) # Update color settings Plus Checkout styling customizations are available only to [Shopify Plus](https://www.shopify.com/plus) merchants. This guide demonstrates how to design a color system that reflects your brand by using the GraphQL Admin API's checkout branding types and their associated fields. You'll learn some sample customizations, but you can use what you've learned to make other color customizations. Tip You can reset styles to their defaults by writing parent fields to `null` with the GraphQL Admin API. Refer to examples of resetting [some](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_color_schemes_to_the_defaults) and [all](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_all_styling_to_defaults) values to the defaults. *** ## Requirements * The store that you're modifying must be on a [Shopify Plus plan](https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plan). * You've created a new [development store](https://shopify.dev/docs/api/development-stores#create-a-development-store-to-test-your-app) with the [Checkout and Customer Accounts Extensibility](https://shopify.dev/docs/api/developer-previews#checkout-and-customer-accounts-extensibility-developer-preview) feature preview enabled. * You can make [authenticated requests](https://shopify.dev/docs/api/admin-graphql#authentication) to the GraphQL Admin API. * You've either [installed the GraphiQL app](https://shopify-graphiql-app.shopifycloud.com/login) on your store or [created an app](https://shopify.dev/docs/apps/build/scaffold-app), with the `read_checkout_branding_settings` and `write_checkout_branding_settings` [access scopes](https://shopify.dev/docs/api/usage/access-scopes). * You're using API version `2023-10` or higher. * You're familiar with the [GraphQL Admin API's branding types](https://shopify.dev/docs/apps/build/checkout/styling#data-structures). *** ## Step 1: Retrieve the store's published checkout profile ID Checkout styling properties apply to a [checkout profile ID](https://shopify.dev/docs/apps/build/checkout/styling#checkout-profile). In this step, you'll retrieve the checkout profile to which you'll apply color changes. 1. Query [`checkoutProfiles`](https://shopify.dev/docs/api/admin-graphql/latest/queries/checkoutProfiles) to retrieve a list of checkout profile IDs. The `is_published` parameter indicates which checkout profile is currently applied to your store's live checkout. ## POST https\://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL query ```graphql query checkoutProfiles { checkoutProfiles(first: 1, query: "is_published:true") { edges { node { id name } } } } ``` ## JSON response ```json { "data": { "checkoutProfiles": { "edges": [ { "node": { "id": "gid://shopify/CheckoutProfile/1", "name": "Default checkout profile" } } ] } } } ``` 1. Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations. *** ## Step 2: Configure global colors The GraphQL Admin API's [`CheckoutBrandingColorGlobalInput`](https://shopify.dev/docs/api/admin-graphql/latest/input-objects/CheckoutBrandingColorGlobalInput) enables you to quickly update the global colors to match your brand. [In a subsequent step](#step-3-configure-color-schemes), you'll also learn how to make granular color changes. The following code changes the global `brand` and `accent` colors to match a shop's visual identity: ## POST https\://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL mutation ```graphql mutation ChangeGlobalColors($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) { checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) { checkoutBranding { designSystem { colors { global { brand accent } } } } userErrors { field message } } } ``` ## Query variables ```json { "checkoutProfileId": "gid://shopify/CheckoutProfile/YOUR_CHECKOUT_PROFILE_ID_HERE", "checkoutBrandingInput": { "designSystem": { "colors": { "global": { "brand": "#456920", "accent": "#456920" } } } } } ``` ## JSON response ```json { "data": { "checkoutBrandingUpsert": { "checkoutBranding": { "designSystem": { "colors": { "global": { "brand": "#456920", "accent": "#456920" } } } }, "userErrors": [] } }, "extensions": { "cost": { "requestedQueryCost": 13, "actualQueryCost": 13 } } } ``` ![The brand and accent colors applied to the shop's checkout](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/applying-brand-and-accent-colors-D4ZF20_N.png) *** ## Step 3: Configure color schemes Configuring [color schemes](https://shopify.dev/docs/api/admin-graphql/latest/objects/CheckoutBrandingColorScheme) gives you a lot of flexibility when the default colors specified in step 1 need to change for a particular context like drawing attention to different checkout sections, or emphasizing content in a particular location. You can apply color schemes to different parts of the UI in step 3. Color schemes are made up of color groups, and all components utilize values specified within these groups. This means that all UI extensions also use these values and automatically inherit your colors. Note Some color groups have nested groups to configure state colors, such as a `hover` state of the primary button, or a `selected` state of the [`ChoiceList`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/forms/choicelist) component. Every color group has the same set of overridable values. [Refer to an example](https://shopify.dev/docs/api/admin-graphql/latest/objects/CheckoutBrandingColorScheme#field-base). Note We automatically derive extra colors from these, for example, text subdued is generated from text. The following code applies shades of green to `scheme1` that match the store's visual identity. The code sets a light green background, text that matches the logo, darker border controls, a dark selected state and makes the primary button hover state more prominent. ## POST https\://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL mutation ```graphql mutation ChangeColorScheme1($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) { checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) { checkoutBranding { designSystem { colors { schemes { scheme1 { base { background text } control { background border selected { background border } } primaryButton { hover { background } } } } } } } userErrors { field message } } } ``` ## Query variables ```json { "checkoutProfileId": "gid://shopify/CheckoutProfile/YOUR_CHECKOUT_PROFILE_ID_HERE", "checkoutBrandingInput": { "designSystem": { "colors": { "schemes": { "scheme1": { "base": { "background": "#F7FAF5", "text": "#44691E" }, "control": { "background": "#F7FAF5", "border": "#70815F", "selected": { "background": "#456920", "border": "#44691E" } }, "primaryButton": { "hover": { "background": "#395719" } } } } } } } } ``` ## JSON response ```json { "data": { "checkoutBrandingUpsert": { "checkoutBranding": { "designSystem": { "colors": { "schemes": { "scheme1": { "base": { "background": "#f7faf5", "text": "#44691e" }, "control": { "background": "#f7faf5", "border": "#70815f", "selected": { "background": "#456920", "border": "#44691e" } }, "primaryButton": { "hover": { "background": "#395719" } } } } } } }, "userErrors": [] } }, "extensions": { "cost": { "requestedQueryCost": 19, "actualQueryCost": 19 } } } ``` ![Screenshot that shows the application of color schemes](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/applying-color-schemes-DXOtDMHe.png) *** ## Step 4: Apply color schemes Configuring color schemes to apply to different parts of the UI overrides the [default color schemes](https://shopify.dev/docs/api/admin-graphql/latest/objects/CheckoutBrandingColorSchemes). Scheme applications are customizable. The following code changes the default scheme structure so that `scheme1` can be applied to the order summary. ## POST https\://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL mutation ```graphql mutation ChangeOrderSummaryScheme($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) { checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) { checkoutBranding { customizations { orderSummary { colorScheme } } } userErrors { field message } } } ``` ## Query variables ```json { "checkoutProfileId": "gid://shopify/CheckoutProfile/YOUR_CHECKOUT_PROFILE_ID_HERE", "checkoutBrandingInput": { "customizations": { "orderSummary": { "colorScheme": "COLOR_SCHEME1" } } } } ``` ## JSON response ```json { "data": { "checkoutBrandingUpsert": { "checkoutBranding": { "customizations": { "orderSummary": { "colorScheme": "COLOR_SCHEME1" } } }, "userErrors": [] } }, "extensions": { "cost": { "requestedQueryCost": 12, "actualQueryCost": 12 } } } ``` ![Scheme 1 applied to the order summary page, which now matches the store's visual identity](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/applying-scheme1-to-order-summary-Cv96Nf0Q.png) *** ## Next steps * Explore the [GraphQL Admin API](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) to learn more about customizing checkout's colors. *** * [Requirements](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#requirements) * [Step 1: Retrieve the store's published checkout profile ID](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#step-1-retrieve-the-stores-published-checkout-profile-id) * [Step 2: Configure global colors](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#step-2-configure-global-colors) * [Step 3: Configure color schemes](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#step-3-configure-color-schemes) * [Step 4: Apply color schemes](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#step-4-apply-color-schemes) * [Next steps](https://shopify.dev/docs/apps/build/checkout/styling/update-color-settings#next-steps)