--- title: checkoutBranding - GraphQL Admin description: |- Returns the visual customizations for checkout for a given checkout profile. To learn more about updating checkout branding settings, refer to the [checkoutBrandingUpsert](https://shopify.dev/api/admin-graphql/unstable/mutations/checkoutBrandingUpsert) mutation and the checkout branding [tutorial](https://shopify.dev/docs/apps/checkout/styling). api_version: 2025-10 api_name: admin type: query api_type: graphql source_url: html: https://shopify.dev/docs/api/admin-graphql/latest/queries/checkoutbranding md: https://shopify.dev/docs/api/admin-graphql/latest/queries/checkoutbranding.md --- # checkout​Branding query Returns the visual customizations for checkout for a given checkout profile. To learn more about updating checkout branding settings, refer to the [checkoutBrandingUpsert](https://shopify.dev/api/admin-graphql/unstable/mutations/checkoutBrandingUpsert) mutation and the checkout branding [tutorial](https://shopify.dev/docs/apps/checkout/styling). ## Arguments * checkout​Profile​Id [ID!](https://shopify.dev/docs/api/admin-graphql/latest/scalars/ID) required A globally-unique identifier. *** ## Possible returns * Checkout​Branding [Checkout​Branding](https://shopify.dev/docs/api/admin-graphql/latest/objects/CheckoutBranding) Creates a unified visual identity for your checkout that keeps customers engaged and reinforces your brand throughout the purchase process. This comprehensive branding system lets you control every visual aspect of checkout, from colors and fonts to layouts and imagery, so your checkout feels like a natural extension of your store. For example, a luxury fashion retailer can configure their checkout with custom color palettes, premium typography, rounded corners for a softer feel, and branded imagery that matches their main website aesthetic. Use the `Branding` object to: * Configure comprehensive checkout visual identity * Coordinate color schemes across all checkout elements * Apply consistent typography and spacing standards * Manage background imagery and layout customizations * Control visibility of various checkout components The branding configuration includes design system foundations like color roles, typography scales, and spacing units, plus specific customizations for sections, dividers, and interactive elements. This allows merchants to create cohesive checkout experiences that reinforce their brand identity while maintaining usability standards. Different color schemes can be defined for various contexts, ensuring optimal contrast and accessibility across different checkout states and customer preferences. *** ## Examples * ### Get global colors #### Description This example demonstrates how to read the global colors from a checkout profile. #### Query ```graphql query GetGlobalColors { checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") { designSystem { colors { global { success warning critical info brand accent decorative } } } } } ``` #### cURL ```bash curl -X POST \ https://your-development-store.myshopify.com/admin/api/2025-10/graphql.json \ -H 'Content-Type: application/json' \ -H 'X-Shopify-Access-Token: {access_token}' \ -d '{ "query": "query GetGlobalColors { checkoutBranding(checkoutProfileId: \"gid://shopify/CheckoutProfile/235093654\") { designSystem { colors { global { success warning critical info brand accent decorative } } } } }" }' ``` #### React Router ```javascript import { authenticate } from "../shopify.server"; export const loader = async ({request}) => { const { admin } = await authenticate.admin(request); const response = await admin.graphql( `#graphql query GetGlobalColors { checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") { designSystem { colors { global { success warning critical info brand accent decorative } } } } }`, ); const json = await response.json(); return json.data; } ``` #### Ruby ```ruby session = ShopifyAPI::Auth::Session.new( shop: "your-development-store.myshopify.com", access_token: access_token ) client = ShopifyAPI::Clients::Graphql::Admin.new( session: session ) query = <<~QUERY query GetGlobalColors { checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") { designSystem { colors { global { success warning critical info brand accent decorative } } } } } QUERY response = client.query(query: query) ``` #### Node.js ```javascript const client = new shopify.clients.Graphql({session}); const data = await client.query({ data: `query GetGlobalColors { checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") { designSystem { colors { global { success warning critical info brand accent decorative } } } } }`, }); ``` #### Response ```json { "checkoutBranding": { "designSystem": { "colors": { "global": { "success": "#FFFFFF", "warning": "#F0F0F0", "critical": "#AABBCC", "info": "#ABCDAB", "brand": "#ABCDAB", "accent": "#0F0F0F", "decorative": "#1F2928" } } } } } ``` ## Get global colors [Open in GraphiQL](http://localhost:3457/graphiql?query=query%20GetGlobalColors%20%7B%0A%20%20checkoutBranding\(checkoutProfileId%3A%20%22gid%3A%2F%2Fshopify%2FCheckoutProfile%2F235093654%22\)%20%7B%0A%20%20%20%20designSystem%20%7B%0A%20%20%20%20%20%20colors%20%7B%0A%20%20%20%20%20%20%20%20global%20%7B%0A%20%20%20%20%20%20%20%20%20%20success%0A%20%20%20%20%20%20%20%20%20%20warning%0A%20%20%20%20%20%20%20%20%20%20critical%0A%20%20%20%20%20%20%20%20%20%20info%0A%20%20%20%20%20%20%20%20%20%20brand%0A%20%20%20%20%20%20%20%20%20%20accent%0A%20%20%20%20%20%20%20%20%20%20decorative%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D) ```javascript import { authenticate } from "../shopify.server"; export const loader = async ({request}) => { const { admin } = await authenticate.admin(request); const response = await admin.graphql( `#graphql query GetGlobalColors { checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") { designSystem { colors { global { success warning critical info brand accent decorative } } } } }`, ); const json = await response.json(); return json.data; } ``` ##### GQL ``` query GetGlobalColors { checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") { designSystem { colors { global { success warning critical info brand accent decorative } } } } } ``` ##### cURL ``` curl -X POST \ https://your-development-store.myshopify.com/admin/api/2025-10/graphql.json \ -H 'Content-Type: application/json' \ -H 'X-Shopify-Access-Token: {access_token}' \ -d '{ "query": "query GetGlobalColors { checkoutBranding(checkoutProfileId: \"gid://shopify/CheckoutProfile/235093654\") { designSystem { colors { global { success warning critical info brand accent decorative } } } } }" }' ``` ##### React Router ``` import { authenticate } from "../shopify.server"; export const loader = async ({request}) => { const { admin } = await authenticate.admin(request); const response = await admin.graphql( `#graphql query GetGlobalColors { checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") { designSystem { colors { global { success warning critical info brand accent decorative } } } } }`, ); const json = await response.json(); return json.data; } ``` ##### Node.js ``` const client = new shopify.clients.Graphql({session}); const data = await client.query({ data: `query GetGlobalColors { checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") { designSystem { colors { global { success warning critical info brand accent decorative } } } } }`, }); ``` ##### Ruby ``` session = ShopifyAPI::Auth::Session.new( shop: "your-development-store.myshopify.com", access_token: access_token ) client = ShopifyAPI::Clients::Graphql::Admin.new( session: session ) query = <<~QUERY query GetGlobalColors { checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") { designSystem { colors { global { success warning critical info brand accent decorative } } } } } QUERY response = client.query(query: query) ``` ## Response JSON ```json { "checkoutBranding": { "designSystem": { "colors": { "global": { "success": "#FFFFFF", "warning": "#F0F0F0", "critical": "#AABBCC", "info": "#ABCDAB", "brand": "#ABCDAB", "accent": "#0F0F0F", "decorative": "#1F2928" } } } } } ```