CheckoutBranding - admin-graphql - OBJECT

Version: 2024-10

Description:

The settings of checkout visual customizations. To learn more about updating checkout branding settings, refer to the [checkoutBrandingUpsert](https://shopify.dev/api/admin-graphql/unstable/mutations/checkoutBrandingUpsert) mutation.

Access Scopes

access to checkout branding settings and the shop must be on a Plus plan or a Development store plan.

Fields

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

Connections

Related queries

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

Related mutations

• checkoutBrandingUpsert Updates the checkout branding settings for a [checkout profile](https://shopify.dev/api/admin-graphql/unstable/queries/checkoutProfile). If the settings don't exist, then new settings are created. The checkout branding settings applied to a published checkout profile will be immediately visible within the store's checkout. The checkout branding settings applied to a draft checkout profile could be previewed within the admin checkout editor. To learn more about updating checkout branding settings, refer to the checkout branding [tutorial](https://shopify.dev/docs/apps/checkout/styling).

Related Unions

Examples

• Get global colors

          Curl example: "curl -X POST \\\nhttps://your-development-store.myshopify.com/admin/api/2024-10/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"
            }
          }
        }
      }
    }
  }