checkoutBranding - admin-graphql - QUERY

Version: 2025-01

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).

Access Scopes

Arguments

• checkoutProfileId: ID! - A globally-unique identifier.

Returns

• 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.

Examples

• Get global colors

          Curl example: "curl -X POST \\\nhttps://your-development-store.myshopify.com/admin/api/2025-01/graphql.json \\\n-H 'Content-Type: application/json' \\\n-H 'X-Shopify-Access-Token: {access_token}' \\\n-d '{\n\"query\": \"query GetGlobalColors { checkoutBranding(checkoutProfileId: \\\"gid://shopify/CheckoutProfile/235093654\\\") { designSystem { colors { global { success warning critical info brand accent decorative } } } } }\"\n}'\n"
          Node example: "const client = new shopify.clients.Graphql({session});\nconst data = await client.query({\n  data: `query GetGlobalColors {\n    checkoutBranding(checkoutProfileId: \"gid://shopify/CheckoutProfile/235093654\") {\n      designSystem {\n        colors {\n          global {\n            success\n            warning\n            critical\n            info\n            brand\n            accent\n            decorative\n          }\n        }\n      }\n    }\n  }`,\n});\n"
          Ruby example: "session = ShopifyAPI::Auth::Session.new(\n  shop: \"your-development-store.myshopify.com\",\n  access_token: access_token\n)\nclient = ShopifyAPI::Clients::Graphql::Admin.new(\n  session: session\n)\n\nquery = <<~QUERY\n  query GetGlobalColors {\n    checkoutBranding(checkoutProfileId: \"gid://shopify/CheckoutProfile/235093654\") {\n      designSystem {\n        colors {\n          global {\n            success\n            warning\n            critical\n            info\n            brand\n            accent\n            decorative\n          }\n        }\n      }\n    }\n  }\nQUERY\n\nresponse = client.query(query: query)\n"
          PHP example: "use Shopify\\Clients\\Graphql;\n\n$client = new Graphql(\"your-development-store.myshopify.com\", $accessToken);\n$query = <<<QUERY\n  query GetGlobalColors {\n    checkoutBranding(checkoutProfileId: \"gid://shopify/CheckoutProfile/235093654\") {\n      designSystem {\n        colors {\n          global {\n            success\n            warning\n            critical\n            info\n            brand\n            accent\n            decorative\n          }\n        }\n      }\n    }\n  }\nQUERY;\n\n$response = $client->query([\"query\" => $query]);\n"
          Remix example: "const { admin } = await authenticate.admin(request);\n\nconst response = await admin.graphql(\n  `#graphql\n  query GetGlobalColors {\n    checkoutBranding(checkoutProfileId: \"gid://shopify/CheckoutProfile/235093654\") {\n      designSystem {\n        colors {\n          global {\n            success\n            warning\n            critical\n            info\n            brand\n            accent\n            decorative\n          }\n        }\n      }\n    }\n  }`,\n);\n\nconst data = await response.json();\n"
          Graphql query: "query GetGlobalColors {\n  checkoutBranding(checkoutProfileId: \"gid://shopify/CheckoutProfile/235093654\") {\n    designSystem {\n      colors {\n        global {\n          success\n          warning\n          critical\n          info\n          brand\n          accent\n          decorative\n        }\n      }\n    }\n  }\n}"
        

  input: null

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