checkoutBrandingUpsert - admin-graphql - MUTATION

Version: 2024-10

Description:

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

Access Scopes

access to checkout branding settings and the shop must be on a Plus plan or a Development store plan. User must have `preferences` permission to modify.

Arguments

• checkoutBrandingInput: CheckoutBrandingInput - The input fields to use to upsert the checkout branding settings (pass null to reset them to default).
• checkoutProfileId: ID! - A globally-unique identifier.

Returns

• checkoutBranding: CheckoutBranding Returns the new checkout branding settings.
• userErrors: CheckoutBrandingUpsertUserError! The list of errors that occurred from executing the mutation.

Examples

• Apply section styles to main and order summary

          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\": \"mutation ApplySectionStyles($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) { checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) { checkoutBranding { customizations { main { section { cornerRadius colorScheme shadow padding } } orderSummary { section { colorScheme shadow padding border } } } } userErrors { field message } } }\",\n \"variables\": {\n    \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n    \"input\": {\n      \"customizations\": {\n        \"main\": {\n          \"section\": {\n            \"cornerRadius\": \"LARGE\",\n            \"colorScheme\": \"COLOR_SCHEME2\",\n            \"shadow\": \"LARGE_200\",\n            \"padding\": \"LARGE_400\"\n          }\n        },\n        \"orderSummary\": {\n          \"section\": {\n            \"colorScheme\": \"COLOR_SCHEME1\",\n            \"shadow\": \"LARGE_200\",\n            \"padding\": \"LARGE_400\",\n            \"border\": \"FULL\"\n          }\n        }\n      }\n    }\n  }\n}'\n"
          Node example: "const client = new shopify.clients.Graphql({session});\nconst data = await client.query({\n  data: {\n    \"query\": `mutation ApplySectionStyles($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n      checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n        checkoutBranding {\n          customizations {\n            main {\n              section {\n                cornerRadius\n                colorScheme\n                shadow\n                padding\n              }\n            }\n            orderSummary {\n              section {\n                colorScheme\n                shadow\n                padding\n                border\n              }\n            }\n          }\n        }\n        userErrors {\n          field\n          message\n        }\n      }\n    }`,\n    \"variables\": {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"input\": {\n        \"customizations\": {\n          \"main\": {\n            \"section\": {\n              \"cornerRadius\": \"LARGE\",\n              \"colorScheme\": \"COLOR_SCHEME2\",\n              \"shadow\": \"LARGE_200\",\n              \"padding\": \"LARGE_400\"\n            }\n          },\n          \"orderSummary\": {\n            \"section\": {\n              \"colorScheme\": \"COLOR_SCHEME1\",\n              \"shadow\": \"LARGE_200\",\n              \"padding\": \"LARGE_400\",\n              \"border\": \"FULL\"\n            }\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  mutation ApplySectionStyles($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n      checkoutBranding {\n        customizations {\n          main {\n            section {\n              cornerRadius\n              colorScheme\n              shadow\n              padding\n            }\n          }\n          orderSummary {\n            section {\n              colorScheme\n              shadow\n              padding\n              border\n            }\n          }\n        }\n      }\n      userErrors {\n        field\n        message\n      }\n    }\n  }\nQUERY\n\nvariables = {\n  \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n  \"input\": {\n    \"customizations\": {\n      \"main\": {\n        \"section\": {\n          \"cornerRadius\": \"LARGE\",\n          \"colorScheme\": \"COLOR_SCHEME2\",\n          \"shadow\": \"LARGE_200\",\n          \"padding\": \"LARGE_400\"\n        }\n      },\n      \"orderSummary\": {\n        \"section\": {\n          \"colorScheme\": \"COLOR_SCHEME1\",\n          \"shadow\": \"LARGE_200\",\n          \"padding\": \"LARGE_400\",\n          \"border\": \"FULL\"\n        }\n      }\n    }\n  }\n}\n\nresponse = client.query(query: query, variables: variables)\n"
          PHP example: "use Shopify\\Clients\\Graphql;\n\n$client = new Graphql(\"your-development-store.myshopify.com\", $accessToken);\n$query = << \"gid://shopify/CheckoutProfile/235093654\",\n  \"input\" => [\n    \"customizations\" => [\n      \"main\" => [\n        \"section\" => [\n          \"cornerRadius\" => \"LARGE\",\n          \"colorScheme\" => \"COLOR_SCHEME2\",\n          \"shadow\" => \"LARGE_200\",\n          \"padding\" => \"LARGE_400\",\n        ],\n      ],\n      \"orderSummary\" => [\n        \"section\" => [\n          \"colorScheme\" => \"COLOR_SCHEME1\",\n          \"shadow\" => \"LARGE_200\",\n          \"padding\" => \"LARGE_400\",\n          \"border\" => \"FULL\",\n        ],\n      ],\n    ],\n  ],\n];\n\n$response = $client->query([\"query\" => $query, \"variables\" => $variables]);\n"
          Remix example: "const { admin } = await authenticate.admin(request);\n\nconst response = await admin.graphql(\n  `#graphql\n  mutation ApplySectionStyles($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n      checkoutBranding {\n        customizations {\n          main {\n            section {\n              cornerRadius\n              colorScheme\n              shadow\n              padding\n            }\n          }\n          orderSummary {\n            section {\n              colorScheme\n              shadow\n              padding\n              border\n            }\n          }\n        }\n      }\n      userErrors {\n        field\n        message\n      }\n    }\n  }`,\n  {\n    variables: {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"input\": {\n        \"customizations\": {\n          \"main\": {\n            \"section\": {\n              \"cornerRadius\": \"LARGE\",\n              \"colorScheme\": \"COLOR_SCHEME2\",\n              \"shadow\": \"LARGE_200\",\n              \"padding\": \"LARGE_400\"\n            }\n          },\n          \"orderSummary\": {\n            \"section\": {\n              \"colorScheme\": \"COLOR_SCHEME1\",\n              \"shadow\": \"LARGE_200\",\n              \"padding\": \"LARGE_400\",\n              \"border\": \"FULL\"\n            }\n          }\n        }\n      }\n    },\n  },\n);\n\nconst data = await response.json();\n"
          Graphql query: "mutation ApplySectionStyles($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n  checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n    checkoutBranding {\n      customizations {\n        main {\n          section {\n            cornerRadius\n            colorScheme\n            shadow\n            padding\n          }\n        }\n        orderSummary {\n          section {\n            colorScheme\n            shadow\n            padding\n            border\n          }\n        }\n      }\n    }\n    userErrors {\n      field\n      message\n    }\n  }\n}"
        

  input: {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "input": {
      "customizations": {
        "main": {
          "section": {
            "cornerRadius": "LARGE",
            "colorScheme": "COLOR_SCHEME2",
            "shadow": "LARGE_200",
            "padding": "LARGE_400"
          }
        },
        "orderSummary": {
          "section": {
            "colorScheme": "COLOR_SCHEME1",
            "shadow": "LARGE_200",
            "padding": "LARGE_400",
            "border": "FULL"
          }
        }
      }
    }
  }

  response: {
    "data": {
      "checkoutBrandingUpsert": {
        "checkoutBranding": {
          "customizations": {
            "main": {
              "section": {
                "cornerRadius": "LARGE",
                "colorScheme": "COLOR_SCHEME2",
                "shadow": "LARGE_200",
                "padding": "LARGE_400"
              }
            },
            "orderSummary": {
              "section": {
                "colorScheme": "COLOR_SCHEME1",
                "shadow": "LARGE_200",
                "padding": "LARGE_400",
                "border": "FULL"
              }
            }
          }
        },
        "userErrors": []
      }
    }
  }

  Modify a color scheme

          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\": \"mutation ChangeScheme2Colors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) { checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) { checkoutBranding { designSystem { colors { schemes { scheme2 { base { background text } } } } } } userErrors { message } } }\",\n \"variables\": {\n    \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n    \"input\": {\n      \"designSystem\": {\n        \"colors\": {\n          \"schemes\": {\n            \"scheme2\": {\n              \"base\": {\n                \"background\": \"#cdf7f3\",\n                \"text\": \"#1f2928\"\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}'\n"
          Node example: "const client = new shopify.clients.Graphql({session});\nconst data = await client.query({\n  data: {\n    \"query\": `mutation ChangeScheme2Colors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n      checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n        checkoutBranding {\n          designSystem {\n            colors {\n              schemes {\n                scheme2 {\n                  base {\n                    background\n                    text\n                  }\n                }\n              }\n            }\n          }\n        }\n        userErrors {\n          message\n        }\n      }\n    }`,\n    \"variables\": {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"input\": {\n        \"designSystem\": {\n          \"colors\": {\n            \"schemes\": {\n              \"scheme2\": {\n                \"base\": {\n                  \"background\": \"#cdf7f3\",\n                  \"text\": \"#1f2928\"\n                }\n              }\n            }\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  mutation ChangeScheme2Colors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n      checkoutBranding {\n        designSystem {\n          colors {\n            schemes {\n              scheme2 {\n                base {\n                  background\n                  text\n                }\n              }\n            }\n          }\n        }\n      }\n      userErrors {\n        message\n      }\n    }\n  }\nQUERY\n\nvariables = {\n  \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n  \"input\": {\n    \"designSystem\": {\n      \"colors\": {\n        \"schemes\": {\n          \"scheme2\": {\n            \"base\": {\n              \"background\": \"#cdf7f3\",\n              \"text\": \"#1f2928\"\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\nresponse = client.query(query: query, variables: variables)\n"
          PHP example: "use Shopify\\Clients\\Graphql;\n\n$client = new Graphql(\"your-development-store.myshopify.com\", $accessToken);\n$query = << \"gid://shopify/CheckoutProfile/235093654\",\n  \"input\" => [\n    \"designSystem\" => [\n      \"colors\" => [\n        \"schemes\" => [\n          \"scheme2\" => [\n            \"base\" => [\n              \"background\" => \"#cdf7f3\",\n              \"text\" => \"#1f2928\",\n            ],\n          ],\n        ],\n      ],\n    ],\n  ],\n];\n\n$response = $client->query([\"query\" => $query, \"variables\" => $variables]);\n"
          Remix example: "const { admin } = await authenticate.admin(request);\n\nconst response = await admin.graphql(\n  `#graphql\n  mutation ChangeScheme2Colors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n      checkoutBranding {\n        designSystem {\n          colors {\n            schemes {\n              scheme2 {\n                base {\n                  background\n                  text\n                }\n              }\n            }\n          }\n        }\n      }\n      userErrors {\n        message\n      }\n    }\n  }`,\n  {\n    variables: {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"input\": {\n        \"designSystem\": {\n          \"colors\": {\n            \"schemes\": {\n              \"scheme2\": {\n                \"base\": {\n                  \"background\": \"#cdf7f3\",\n                  \"text\": \"#1f2928\"\n                }\n              }\n            }\n          }\n        }\n      }\n    },\n  },\n);\n\nconst data = await response.json();\n"
          Graphql query: "mutation ChangeScheme2Colors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n  checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n    checkoutBranding {\n      designSystem {\n        colors {\n          schemes {\n            scheme2 {\n              base {\n                background\n                text\n              }\n            }\n          }\n        }\n      }\n    }\n    userErrors {\n      message\n    }\n  }\n}"
        

  input: {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "input": {
      "designSystem": {
        "colors": {
          "schemes": {
            "scheme2": {
              "base": {
                "background": "#cdf7f3",
                "text": "#1f2928"
              }
            }
          }
        }
      }
    }
  }

  response: {
    "data": {
      "checkoutBrandingUpsert": {
        "checkoutBranding": {
          "designSystem": {
            "colors": {
              "schemes": {
                "scheme2": {
                  "base": {
                    "background": "#cdf7f3",
                    "text": "#1f2928"
                  }
                }
              }
            }
          }
        },
        "userErrors": []
      }
    }
  }

  Modify checkout font settings

          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\": \"mutation SetShopifyFonts($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) { checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) { checkoutBranding { designSystem { typography { size { base ratio } primary { name base { weight } bold { weight } } secondary { name base { weight } bold { weight } } } } } userErrors { message } } }\",\n \"variables\": {\n    \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n    \"input\": {\n      \"designSystem\": {\n        \"typography\": {\n          \"primary\": {\n            \"shopifyFontGroup\": {\n              \"name\": \"Univers Next\"\n            }\n          },\n          \"secondary\": {\n            \"shopifyFontGroup\": {\n              \"name\": \"Univers Next\"\n            }\n          }\n        }\n      }\n    }\n  }\n}'\n"
          Node example: "const client = new shopify.clients.Graphql({session});\nconst data = await client.query({\n  data: {\n    \"query\": `mutation SetShopifyFonts($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n      checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n        checkoutBranding {\n          designSystem {\n            typography {\n              size {\n                base\n                ratio\n              }\n              primary {\n                name\n                base {\n                  weight\n                }\n                bold {\n                  weight\n                }\n              }\n              secondary {\n                name\n                base {\n                  weight\n                }\n                bold {\n                  weight\n                }\n              }\n            }\n          }\n        }\n        userErrors {\n          message\n        }\n      }\n    }`,\n    \"variables\": {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"input\": {\n        \"designSystem\": {\n          \"typography\": {\n            \"primary\": {\n              \"shopifyFontGroup\": {\n                \"name\": \"Univers Next\"\n              }\n            },\n            \"secondary\": {\n              \"shopifyFontGroup\": {\n                \"name\": \"Univers Next\"\n              }\n            }\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  mutation SetShopifyFonts($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n      checkoutBranding {\n        designSystem {\n          typography {\n            size {\n              base\n              ratio\n            }\n            primary {\n              name\n              base {\n                weight\n              }\n              bold {\n                weight\n              }\n            }\n            secondary {\n              name\n              base {\n                weight\n              }\n              bold {\n                weight\n              }\n            }\n          }\n        }\n      }\n      userErrors {\n        message\n      }\n    }\n  }\nQUERY\n\nvariables = {\n  \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n  \"input\": {\n    \"designSystem\": {\n      \"typography\": {\n        \"primary\": {\n          \"shopifyFontGroup\": {\n            \"name\": \"Univers Next\"\n          }\n        },\n        \"secondary\": {\n          \"shopifyFontGroup\": {\n            \"name\": \"Univers Next\"\n          }\n        }\n      }\n    }\n  }\n}\n\nresponse = client.query(query: query, variables: variables)\n"
          PHP example: "use Shopify\\Clients\\Graphql;\n\n$client = new Graphql(\"your-development-store.myshopify.com\", $accessToken);\n$query = << \"gid://shopify/CheckoutProfile/235093654\",\n  \"input\" => [\n    \"designSystem\" => [\n      \"typography\" => [\n        \"primary\" => [\n          \"shopifyFontGroup\" => [\n            \"name\" => \"Univers Next\",\n          ],\n        ],\n        \"secondary\" => [\n          \"shopifyFontGroup\" => [\n            \"name\" => \"Univers Next\",\n          ],\n        ],\n      ],\n    ],\n  ],\n];\n\n$response = $client->query([\"query\" => $query, \"variables\" => $variables]);\n"
          Remix example: "const { admin } = await authenticate.admin(request);\n\nconst response = await admin.graphql(\n  `#graphql\n  mutation SetShopifyFonts($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n      checkoutBranding {\n        designSystem {\n          typography {\n            size {\n              base\n              ratio\n            }\n            primary {\n              name\n              base {\n                weight\n              }\n              bold {\n                weight\n              }\n            }\n            secondary {\n              name\n              base {\n                weight\n              }\n              bold {\n                weight\n              }\n            }\n          }\n        }\n      }\n      userErrors {\n        message\n      }\n    }\n  }`,\n  {\n    variables: {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"input\": {\n        \"designSystem\": {\n          \"typography\": {\n            \"primary\": {\n              \"shopifyFontGroup\": {\n                \"name\": \"Univers Next\"\n              }\n            },\n            \"secondary\": {\n              \"shopifyFontGroup\": {\n                \"name\": \"Univers Next\"\n              }\n            }\n          }\n        }\n      }\n    },\n  },\n);\n\nconst data = await response.json();\n"
          Graphql query: "mutation SetShopifyFonts($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n  checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n    checkoutBranding {\n      designSystem {\n        typography {\n          size {\n            base\n            ratio\n          }\n          primary {\n            name\n            base {\n              weight\n            }\n            bold {\n              weight\n            }\n          }\n          secondary {\n            name\n            base {\n              weight\n            }\n            bold {\n              weight\n            }\n          }\n        }\n      }\n    }\n    userErrors {\n      message\n    }\n  }\n}"
        

  input: {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "input": {
      "designSystem": {
        "typography": {
          "primary": {
            "shopifyFontGroup": {
              "name": "Univers Next"
            }
          },
          "secondary": {
            "shopifyFontGroup": {
              "name": "Univers Next"
            }
          }
        }
      }
    }
  }

  response: {
    "data": {
      "checkoutBrandingUpsert": {
        "checkoutBranding": {
          "designSystem": {
            "typography": {
              "size": {
                "base": 14.0,
                "ratio": 1.2
              },
              "primary": {
                "name": "Univers Next",
                "base": {
                  "weight": 400
                },
                "bold": {
                  "weight": 700
                }
              },
              "secondary": {
                "name": "Univers Next",
                "base": {
                  "weight": 400
                },
                "bold": {
                  "weight": 700
                }
              }
            }
          }
        },
        "userErrors": []
      }
    }
  }

  Modify 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\": \"mutation ChangeGlobalColors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) { checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) { checkoutBranding { designSystem { colors { global { success warning critical info brand accent decorative } } } } userErrors { message } } }\",\n \"variables\": {\n    \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n    \"input\": {\n      \"designSystem\": {\n        \"colors\": {\n          \"global\": {\n            \"success\": \"#38e004\",\n            \"warning\": \"#e0e004\",\n            \"critical\": \"#e00404\",\n            \"info\": \"#04e0e0\",\n            \"brand\": \"#e004e0\",\n            \"accent\": \"#04e004\",\n            \"decorative\": \"#e0e0e0\"\n          }\n        }\n      }\n    }\n  }\n}'\n"
          Node example: "const client = new shopify.clients.Graphql({session});\nconst data = await client.query({\n  data: {\n    \"query\": `mutation ChangeGlobalColors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n      checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n        checkoutBranding {\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        userErrors {\n          message\n        }\n      }\n    }`,\n    \"variables\": {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"input\": {\n        \"designSystem\": {\n          \"colors\": {\n            \"global\": {\n              \"success\": \"#38e004\",\n              \"warning\": \"#e0e004\",\n              \"critical\": \"#e00404\",\n              \"info\": \"#04e0e0\",\n              \"brand\": \"#e004e0\",\n              \"accent\": \"#04e004\",\n              \"decorative\": \"#e0e0e0\"\n            }\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  mutation ChangeGlobalColors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n      checkoutBranding {\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      userErrors {\n        message\n      }\n    }\n  }\nQUERY\n\nvariables = {\n  \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n  \"input\": {\n    \"designSystem\": {\n      \"colors\": {\n        \"global\": {\n          \"success\": \"#38e004\",\n          \"warning\": \"#e0e004\",\n          \"critical\": \"#e00404\",\n          \"info\": \"#04e0e0\",\n          \"brand\": \"#e004e0\",\n          \"accent\": \"#04e004\",\n          \"decorative\": \"#e0e0e0\"\n        }\n      }\n    }\n  }\n}\n\nresponse = client.query(query: query, variables: variables)\n"
          PHP example: "use Shopify\\Clients\\Graphql;\n\n$client = new Graphql(\"your-development-store.myshopify.com\", $accessToken);\n$query = << \"gid://shopify/CheckoutProfile/235093654\",\n  \"input\" => [\n    \"designSystem\" => [\n      \"colors\" => [\n        \"global\" => [\n          \"success\" => \"#38e004\",\n          \"warning\" => \"#e0e004\",\n          \"critical\" => \"#e00404\",\n          \"info\" => \"#04e0e0\",\n          \"brand\" => \"#e004e0\",\n          \"accent\" => \"#04e004\",\n          \"decorative\" => \"#e0e0e0\",\n        ],\n      ],\n    ],\n  ],\n];\n\n$response = $client->query([\"query\" => $query, \"variables\" => $variables]);\n"
          Remix example: "const { admin } = await authenticate.admin(request);\n\nconst response = await admin.graphql(\n  `#graphql\n  mutation ChangeGlobalColors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n      checkoutBranding {\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      userErrors {\n        message\n      }\n    }\n  }`,\n  {\n    variables: {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"input\": {\n        \"designSystem\": {\n          \"colors\": {\n            \"global\": {\n              \"success\": \"#38e004\",\n              \"warning\": \"#e0e004\",\n              \"critical\": \"#e00404\",\n              \"info\": \"#04e0e0\",\n              \"brand\": \"#e004e0\",\n              \"accent\": \"#04e004\",\n              \"decorative\": \"#e0e0e0\"\n            }\n          }\n        }\n      }\n    },\n  },\n);\n\nconst data = await response.json();\n"
          Graphql query: "mutation ChangeGlobalColors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n  checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n    checkoutBranding {\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    userErrors {\n      message\n    }\n  }\n}"
        

  input: {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "input": {
      "designSystem": {
        "colors": {
          "global": {
            "success": "#38e004",
            "warning": "#e0e004",
            "critical": "#e00404",
            "info": "#04e0e0",
            "brand": "#e004e0",
            "accent": "#04e004",
            "decorative": "#e0e0e0"
          }
        }
      }
    }
  }

  response: {
    "data": {
      "checkoutBrandingUpsert": {
        "checkoutBranding": {
          "designSystem": {
            "colors": {
              "global": {
                "success": "#38e004",
                "warning": "#e0e004",
                "critical": "#e00404",
                "info": "#04e0e0",
                "brand": "#e004e0",
                "accent": "#04e004",
                "decorative": "#e0e0e0"
              }
            }
          }
        },
        "userErrors": []
      }
    }
  }

  Reset all styling to defaults

          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\": \"mutation ChangeColorSchemeAndOrderSummary($checkoutBrandingInput: CheckoutBrandingInput, $checkoutProfileId: ID!) { checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) { checkoutBranding { designSystem { colors { schemes { scheme1 { base { background text } } } } } customizations { orderSummary { colorScheme } } } userErrors { field message } } }\",\n \"variables\": {\n    \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n    \"checkoutBrandingInput\": null\n  }\n}'\n"
          Node example: "const client = new shopify.clients.Graphql({session});\nconst data = await client.query({\n  data: {\n    \"query\": `mutation ChangeColorSchemeAndOrderSummary($checkoutBrandingInput: CheckoutBrandingInput, $checkoutProfileId: ID!) {\n      checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {\n        checkoutBranding {\n          designSystem {\n            colors {\n              schemes {\n                scheme1 {\n                  base {\n                    background\n                    text\n                  }\n                }\n              }\n            }\n          }\n          customizations {\n            orderSummary {\n              colorScheme\n            }\n          }\n        }\n        userErrors {\n          field\n          message\n        }\n      }\n    }`,\n    \"variables\": {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"checkoutBrandingInput\": null\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  mutation ChangeColorSchemeAndOrderSummary($checkoutBrandingInput: CheckoutBrandingInput, $checkoutProfileId: ID!) {\n    checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {\n      checkoutBranding {\n        designSystem {\n          colors {\n            schemes {\n              scheme1 {\n                base {\n                  background\n                  text\n                }\n              }\n            }\n          }\n        }\n        customizations {\n          orderSummary {\n            colorScheme\n          }\n        }\n      }\n      userErrors {\n        field\n        message\n      }\n    }\n  }\nQUERY\n\nvariables = {\n  \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n  \"checkoutBrandingInput\": nil\n}\n\nresponse = client.query(query: query, variables: variables)\n"
          PHP example: "use Shopify\\Clients\\Graphql;\n\n$client = new Graphql(\"your-development-store.myshopify.com\", $accessToken);\n$query = << \"gid://shopify/CheckoutProfile/235093654\",\n  \"checkoutBrandingInput\" => null,\n];\n\n$response = $client->query([\"query\" => $query, \"variables\" => $variables]);\n"
          Remix example: "const { admin } = await authenticate.admin(request);\n\nconst response = await admin.graphql(\n  `#graphql\n  mutation ChangeColorSchemeAndOrderSummary($checkoutBrandingInput: CheckoutBrandingInput, $checkoutProfileId: ID!) {\n    checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {\n      checkoutBranding {\n        designSystem {\n          colors {\n            schemes {\n              scheme1 {\n                base {\n                  background\n                  text\n                }\n              }\n            }\n          }\n        }\n        customizations {\n          orderSummary {\n            colorScheme\n          }\n        }\n      }\n      userErrors {\n        field\n        message\n      }\n    }\n  }`,\n  {\n    variables: {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"checkoutBrandingInput\": null\n    },\n  },\n);\n\nconst data = await response.json();\n"
          Graphql query: "mutation ChangeColorSchemeAndOrderSummary($checkoutBrandingInput: CheckoutBrandingInput, $checkoutProfileId: ID!) {\n  checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {\n    checkoutBranding {\n      designSystem {\n        colors {\n          schemes {\n            scheme1 {\n              base {\n                background\n                text\n              }\n            }\n          }\n        }\n      }\n      customizations {\n        orderSummary {\n          colorScheme\n        }\n      }\n    }\n    userErrors {\n      field\n      message\n    }\n  }\n}"
        

  input: {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "checkoutBrandingInput": null
  }

  response: {
    "data": {
      "checkoutBrandingUpsert": {
        "checkoutBranding": {
          "designSystem": null,
          "customizations": null
        },
        "userErrors": []
      }
    }
  }

  Reset color schemes to the defaults

          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\": \"mutation ChangeColorScheme1($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) { checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) { checkoutBranding { designSystem { colors { schemes { scheme1 { base { background text } control { background border selected { background border } } primaryButton { hover { background } } } } } } } userErrors { field message } } }\",\n \"variables\": {\n    \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n    \"checkoutBrandingInput\": {\n      \"designSystem\": {\n        \"colors\": {\n          \"schemes\": null\n        }\n      }\n    }\n  }\n}'\n"
          Node example: "const client = new shopify.clients.Graphql({session});\nconst data = await client.query({\n  data: {\n    \"query\": `mutation ChangeColorScheme1($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {\n      checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {\n        checkoutBranding {\n          designSystem {\n            colors {\n              schemes {\n                scheme1 {\n                  base {\n                    background\n                    text\n                  }\n                  control {\n                    background\n                    border\n                    selected {\n                      background\n                      border\n                    }\n                  }\n                  primaryButton {\n                    hover {\n                      background\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n        userErrors {\n          field\n          message\n        }\n      }\n    }`,\n    \"variables\": {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"checkoutBrandingInput\": {\n        \"designSystem\": {\n          \"colors\": {\n            \"schemes\": null\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  mutation ChangeColorScheme1($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {\n    checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {\n      checkoutBranding {\n        designSystem {\n          colors {\n            schemes {\n              scheme1 {\n                base {\n                  background\n                  text\n                }\n                control {\n                  background\n                  border\n                  selected {\n                    background\n                    border\n                  }\n                }\n                primaryButton {\n                  hover {\n                    background\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n      userErrors {\n        field\n        message\n      }\n    }\n  }\nQUERY\n\nvariables = {\n  \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n  \"checkoutBrandingInput\": {\n    \"designSystem\": {\n      \"colors\": {\n        \"schemes\": null\n      }\n    }\n  }\n}\n\nresponse = client.query(query: query, variables: variables)\n"
          PHP example: "use Shopify\\Clients\\Graphql;\n\n$client = new Graphql(\"your-development-store.myshopify.com\", $accessToken);\n$query = << \"gid://shopify/CheckoutProfile/235093654\",\n  \"checkoutBrandingInput\" => [\n    \"designSystem\" => [\n      \"colors\" => [\n        \"schemes\" => null,\n      ],\n    ],\n  ],\n];\n\n$response = $client->query([\"query\" => $query, \"variables\" => $variables]);\n"
          Remix example: "const { admin } = await authenticate.admin(request);\n\nconst response = await admin.graphql(\n  `#graphql\n  mutation ChangeColorScheme1($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {\n    checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {\n      checkoutBranding {\n        designSystem {\n          colors {\n            schemes {\n              scheme1 {\n                base {\n                  background\n                  text\n                }\n                control {\n                  background\n                  border\n                  selected {\n                    background\n                    border\n                  }\n                }\n                primaryButton {\n                  hover {\n                    background\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n      userErrors {\n        field\n        message\n      }\n    }\n  }`,\n  {\n    variables: {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"checkoutBrandingInput\": {\n        \"designSystem\": {\n          \"colors\": {\n            \"schemes\": null\n          }\n        }\n      }\n    },\n  },\n);\n\nconst data = await response.json();\n"
          Graphql query: "mutation ChangeColorScheme1($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {\n  checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {\n    checkoutBranding {\n      designSystem {\n        colors {\n          schemes {\n            scheme1 {\n              base {\n                background\n                text\n              }\n              control {\n                background\n                border\n                selected {\n                  background\n                  border\n                }\n              }\n              primaryButton {\n                hover {\n                  background\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n    userErrors {\n      field\n      message\n    }\n  }\n}"
        

  input: {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "checkoutBrandingInput": {
      "designSystem": {
        "colors": {
          "schemes": null
        }
      }
    }
  }

  response: {
    "data": {
      "checkoutBrandingUpsert": {
        "checkoutBranding": {
          "designSystem": {
            "colors": {
              "schemes": null
            }
          }
        },
        "userErrors": []
      }
    }
  }

  Set a checkout logo

          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\": \"mutation SetLogo($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) { checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) { checkoutBranding { customizations { header { logo { image { url } } } } } userErrors { message } } }\",\n \"variables\": {\n    \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n    \"input\": {\n      \"customizations\": {\n        \"header\": {\n          \"logo\": {\n            \"image\": {\n              \"mediaImageId\": null\n            }\n          }\n        }\n      }\n    }\n  }\n}'\n"
          Node example: "const client = new shopify.clients.Graphql({session});\nconst data = await client.query({\n  data: {\n    \"query\": `mutation SetLogo($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n      checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n        checkoutBranding {\n          customizations {\n            header {\n              logo {\n                image {\n                  url\n                }\n              }\n            }\n          }\n        }\n        userErrors {\n          message\n        }\n      }\n    }`,\n    \"variables\": {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"input\": {\n        \"customizations\": {\n          \"header\": {\n            \"logo\": {\n              \"image\": {\n                \"mediaImageId\": null\n              }\n            }\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  mutation SetLogo($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n      checkoutBranding {\n        customizations {\n          header {\n            logo {\n              image {\n                url\n              }\n            }\n          }\n        }\n      }\n      userErrors {\n        message\n      }\n    }\n  }\nQUERY\n\nvariables = {\n  \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n  \"input\": {\n    \"customizations\": {\n      \"header\": {\n        \"logo\": {\n          \"image\": {\n            \"mediaImageId\": null\n          }\n        }\n      }\n    }\n  }\n}\n\nresponse = client.query(query: query, variables: variables)\n"
          PHP example: "use Shopify\\Clients\\Graphql;\n\n$client = new Graphql(\"your-development-store.myshopify.com\", $accessToken);\n$query = << \"gid://shopify/CheckoutProfile/235093654\",\n  \"input\" => [\n    \"customizations\" => [\n      \"header\" => [\n        \"logo\" => [\n          \"image\" => [\n            \"mediaImageId\" => null,\n          ],\n        ],\n      ],\n    ],\n  ],\n];\n\n$response = $client->query([\"query\" => $query, \"variables\" => $variables]);\n"
          Remix example: "const { admin } = await authenticate.admin(request);\n\nconst response = await admin.graphql(\n  `#graphql\n  mutation SetLogo($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n      checkoutBranding {\n        customizations {\n          header {\n            logo {\n              image {\n                url\n              }\n            }\n          }\n        }\n      }\n      userErrors {\n        message\n      }\n    }\n  }`,\n  {\n    variables: {\n      \"checkoutProfileId\": \"gid://shopify/CheckoutProfile/235093654\",\n      \"input\": {\n        \"customizations\": {\n          \"header\": {\n            \"logo\": {\n              \"image\": {\n                \"mediaImageId\": null\n              }\n            }\n          }\n        }\n      }\n    },\n  },\n);\n\nconst data = await response.json();\n"
          Graphql query: "mutation SetLogo($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {\n  checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {\n    checkoutBranding {\n      customizations {\n        header {\n          logo {\n            image {\n              url\n            }\n          }\n        }\n      }\n    }\n    userErrors {\n      message\n    }\n  }\n}"
        

  input: {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "input": {
      "customizations": {
        "header": {
          "logo": {
            "image": {
              "mediaImageId": null
            }
          }
        }
      }
    }
  }

  response: {
    "data": {
      "checkoutBrandingUpsert": {
        "checkoutBranding": {
          "customizations": {
            "header": {
              "logo": {
                "image": null
              }
            }
          }
        },
        "userErrors": []
      }
    }
  }