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.

Arguments

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

Was this section helpful?

Anchor to Possible returnsPossible returns

CheckoutBranding

•

CheckoutBranding

The settings of checkout visual customizations.

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

customizations• CheckoutBrandingCustomizations: The customizations that apply to specific components or areas of the user interface.
designSystem• CheckoutBrandingDesignSystem: The design system allows you to set values that represent specific attributes of your brand like color and font. These attributes are used throughout the user interface. This brings consistency and allows you to easily make broad design changes.

Was this section helpful?

Get global colors

Open in GraphiQL

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();

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

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

{

"checkoutBranding": {

"designSystem": {

"colors": {

"global": {

"success": "#FFFFFF",

"warning": "#F0F0F0",

"critical": "#AABBCC",

"info": "#ABCDAB",

"brand": "#ABCDAB",

"accent": "#0F0F0F",

"decorative": "#1F2928"

}