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.

Arguments

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

Was this section helpful?

Anchor to Possible returnsPossible returns

Anchor to CheckoutBrandingCheckoutBranding • CheckoutBranding: The settings of checkout visual customizations.

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

Was this section helpful?

Get global colors

1const { admin } = await authenticate.admin(request);
2
3const response = await admin.graphql(
4  `#graphql
5  query GetGlobalColors {
6    checkoutBranding(checkoutProfileId: "gid://shopify/CheckoutProfile/235093654") {
7      designSystem {
8        colors {
9          global {
10            success
11            warning
12            critical
13            info
14            brand
15            accent
16            decorative
17          }
18        }
19      }
20    }
21  }`,
22);
23
24const data = await response.json();
25

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

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 data = await response.json();

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

1{
2  "checkoutBranding": {
3    "designSystem": {
4      "colors": {
5        "global": {
6          "success": "#FFFFFF",
7          "warning": "#F0F0F0",
8          "critical": "#AABBCC",
9          "info": "#ABCDAB",
10          "brand": "#ABCDAB",
11          "accent": "#0F0F0F",
12          "decorative": "#1F2928"
13        }
14      }
15    }
16  }
17}