Choose a version:

checkoutBranding

query

Returns the visual customizations for checkout for a given checkout profile.

To learn more about updating checkout branding settings, refer to the checkoutBrandingUpsert mutation and the checkout branding tutorial.

Anchor to Arguments

Arguments

Anchor to checkoutProfileIdcheckoutProfileId •ID! required: A globally-unique identifier.

Was this section helpful?

Anchor to Possible returnsPossible returns

Anchor to CheckoutBrandingCheckoutBranding •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.

Was this section helpful?

Examples

Get global colors

Description

This example demonstrates how to read the global colors from a checkout profile.

Query

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;
}

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

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

{
  "checkoutBranding": {
    "designSystem": {
      "colors": {
        "global": {
          "success": "#FFFFFF",
          "warning": "#F0F0F0",
          "critical": "#AABBCC",
          "info": "#ABCDAB",
          "brand": "#ABCDAB",
          "accent": "#0F0F0F",
          "decorative": "#1F2928"
        }
      }
    }
  }
}

Get global colors

Open in GraphiQL

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;

}

query GetGlobalColors {
  checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") {
    designSystem {
      colors {
        global {
          success
          warning
          critical
          info
          brand
          accent
          decorative
        }
      }
    }
  }
}

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 } } } } }"
}'

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;
}

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
          }
        }
      }
    }
  }`,
});

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

{

"checkoutBranding": {

"designSystem": {

"colors": {

"global": {

"success": "#FFFFFF",

"warning": "#F0F0F0",

"critical": "#AABBCC",

"info": "#ABCDAB",

"brand": "#ABCDAB",

"accent": "#0F0F0F",

"decorative": "#1F2928"

}