# checkoutBrandingUpsert - admin-graphql - MUTATION
Version: 2024-04

## 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](/docs/api/admin-graphql/2024-04/input-objects/CheckoutBrandingInput): CheckoutBrandingInput - The input fields to use to upsert the checkout branding settings (pass null to reset them to default).
* [checkoutProfileId](/docs/api/admin-graphql/2024-04/scalars/ID): ID! - A globally-unique identifier.


## Returns
* [checkoutBranding](/docs/api/admin-graphql/2024-04/objects/CheckoutBranding): CheckoutBranding Returns the new checkout branding settings.
* [userErrors](/docs/api/admin-graphql/2024-04/objects/CheckoutBrandingUpsertUserError): 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-04/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" 
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}"
#### Graphql 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"
        }
      }
    }
  }
}
#### Graphql 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-04/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" 
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}"
#### Graphql Input
{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
  "input": {
    "designSystem": {
      "colors": {
        "schemes": {
          "scheme2": {
            "base": {
              "background": "#cdf7f3",
              "text": "#1f2928"
            }
          }
        }
      }
    }
  }
}
#### Graphql 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-04/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" 
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}"
#### Graphql Input
{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
  "input": {
    "designSystem": {
      "typography": {
        "primary": {
          "shopifyFontGroup": {
            "name": "Univers Next"
          }
        },
        "secondary": {
          "shopifyFontGroup": {
            "name": "Univers Next"
          }
        }
      }
    }
  }
}
#### Graphql 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-04/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" 
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}"
#### Graphql Input
{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
  "input": {
    "designSystem": {
      "colors": {
        "global": {
          "success": "#38e004",
          "warning": "#e0e004",
          "critical": "#e00404",
          "info": "#04e0e0",
          "brand": "#e004e0",
          "accent": "#04e004",
          "decorative": "#e0e0e0"
        }
      }
    }
  }
}
#### Graphql 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-04/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" 
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}"
#### Graphql Input
{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
  "checkoutBrandingInput": null
}
#### Graphql 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-04/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" 
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}"
#### Graphql Input
{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
  "checkoutBrandingInput": {
    "designSystem": {
      "colors": {
        "schemes": null
      }
    }
  }
}
#### Graphql 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-04/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" 
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}"
#### Graphql Input
{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
  "input": {
    "customizations": {
      "header": {
        "logo": {
          "image": {
            "mediaImageId": null
          }
        }
      }
    }
  }
}
#### Graphql Response
{
  "data": {
    "checkoutBrandingUpsert": {
      "checkoutBranding": {
        "customizations": {
          "header": {
            "logo": {
              "image": null
            }
          }
        }
      },
      "userErrors": []
    }
  }
}