Choose a version:

checkoutBrandingUpsert

mutation

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

Updates the checkout branding settings for a checkout profile.

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.

Anchor to Arguments

Arguments

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

Was this section helpful?

Anchor to CheckoutBrandingUpsertPayload returnsCheckoutBrandingUpsertPayload returns

Anchor to checkoutBrandingcheckoutBranding •CheckoutBranding: Returns the new checkout branding settings.
Anchor to userErrorsuserErrors •[CheckoutBrandingUpsertUserError!]! non-null: The list of errors that occurred from executing the mutation.

Was this section helpful?

Examples

Apply section styles to main and order summary

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
    }
  }
}

Variables

{
  "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"
        }
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"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 } } }",
 "variables": {
    "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"
          }
        }
      }
    }
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  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
      }
    }
  }`,
  {
    variables: {
        "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"
                    }
                }
            }
        }
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  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
      }
    }
  }
QUERY

variables = {
  "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 = client.query(query: query, variables: variables)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "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
        }
      }
    }`,
    "variables": {
        "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

{
  "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

Query

mutation ChangeScheme2Colors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
  checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
    checkoutBranding {
      designSystem {
        colors {
          schemes {
            scheme2 {
              base {
                background
                text
              }
            }
          }
        }
      }
    }
    userErrors {
      message
    }
  }
}

Variables

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

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"query": "mutation ChangeScheme2Colors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) { checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) { checkoutBranding { designSystem { colors { schemes { scheme2 { base { background text } } } } } } userErrors { message } } }",
 "variables": {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "input": {
      "designSystem": {
        "colors": {
          "schemes": {
            "scheme2": {
              "base": {
                "background": "#cdf7f3",
                "text": "#1f2928"
              }
            }
          }
        }
      }
    }
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  mutation ChangeScheme2Colors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
      checkoutBranding {
        designSystem {
          colors {
            schemes {
              scheme2 {
                base {
                  background
                  text
                }
              }
            }
          }
        }
      }
      userErrors {
        message
      }
    }
  }`,
  {
    variables: {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "input": {
            "designSystem": {
                "colors": {
                    "schemes": {
                        "scheme2": {
                            "base": {
                                "background": "#cdf7f3",
                                "text": "#1f2928"
                            }
                        }
                    }
                }
            }
        }
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  mutation ChangeScheme2Colors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
      checkoutBranding {
        designSystem {
          colors {
            schemes {
              scheme2 {
                base {
                  background
                  text
                }
              }
            }
          }
        }
      }
      userErrors {
        message
      }
    }
  }
QUERY

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

response = client.query(query: query, variables: variables)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "query": `mutation ChangeScheme2Colors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
      checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
        checkoutBranding {
          designSystem {
            colors {
              schemes {
                scheme2 {
                  base {
                    background
                    text
                  }
                }
              }
            }
          }
        }
        userErrors {
          message
        }
      }
    }`,
    "variables": {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "input": {
            "designSystem": {
                "colors": {
                    "schemes": {
                        "scheme2": {
                            "base": {
                                "background": "#cdf7f3",
                                "text": "#1f2928"
                            }
                        }
                    }
                }
            }
        }
    },
  },
});

Response

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

Modify checkout font settings

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
    }
  }
}

Variables

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

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"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 } } }",
 "variables": {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "input": {
      "designSystem": {
        "typography": {
          "primary": {
            "shopifyFontGroup": {
              "name": "Univers Next"
            }
          },
          "secondary": {
            "shopifyFontGroup": {
              "name": "Univers Next"
            }
          }
        }
      }
    }
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  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
      }
    }
  }`,
  {
    variables: {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "input": {
            "designSystem": {
                "typography": {
                    "primary": {
                        "shopifyFontGroup": {
                            "name": "Univers Next"
                        }
                    },
                    "secondary": {
                        "shopifyFontGroup": {
                            "name": "Univers Next"
                        }
                    }
                }
            }
        }
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  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
      }
    }
  }
QUERY

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

response = client.query(query: query, variables: variables)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "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
        }
      }
    }`,
    "variables": {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "input": {
            "designSystem": {
                "typography": {
                    "primary": {
                        "shopifyFontGroup": {
                            "name": "Univers Next"
                        }
                    },
                    "secondary": {
                        "shopifyFontGroup": {
                            "name": "Univers Next"
                        }
                    }
                }
            }
        }
    },
  },
});

Response

{
  "checkoutBrandingUpsert": {
    "checkoutBranding": {
      "designSystem": {
        "typography": {
          "size": {
            "base": 14,
            "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

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
    }
  }
}

Variables

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

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"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 } } }",
 "variables": {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "input": {
      "designSystem": {
        "colors": {
          "global": {
            "success": "#38e004",
            "warning": "#e0e004",
            "critical": "#e00404",
            "info": "#04e0e0",
            "brand": "#e004e0",
            "accent": "#04e004",
            "decorative": "#e0e0e0"
          }
        }
      }
    }
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  mutation ChangeGlobalColors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
      checkoutBranding {
        designSystem {
          colors {
            global {
              success
              warning
              critical
              info
              brand
              accent
              decorative
            }
          }
        }
      }
      userErrors {
        message
      }
    }
  }`,
  {
    variables: {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "input": {
            "designSystem": {
                "colors": {
                    "global": {
                        "success": "#38e004",
                        "warning": "#e0e004",
                        "critical": "#e00404",
                        "info": "#04e0e0",
                        "brand": "#e004e0",
                        "accent": "#04e004",
                        "decorative": "#e0e0e0"
                    }
                }
            }
        }
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  mutation ChangeGlobalColors($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
      checkoutBranding {
        designSystem {
          colors {
            global {
              success
              warning
              critical
              info
              brand
              accent
              decorative
            }
          }
        }
      }
      userErrors {
        message
      }
    }
  }
QUERY

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

response = client.query(query: query, variables: variables)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "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
        }
      }
    }`,
    "variables": {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "input": {
            "designSystem": {
                "colors": {
                    "global": {
                        "success": "#38e004",
                        "warning": "#e0e004",
                        "critical": "#e00404",
                        "info": "#04e0e0",
                        "brand": "#e004e0",
                        "accent": "#04e004",
                        "decorative": "#e0e0e0"
                    }
                }
            }
        }
    },
  },
});

Response

{
  "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

Description

Remove all checkout branding customizations and reset to the defaults.

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
    }
  }
}

Variables

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

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"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 } } }",
 "variables": {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "checkoutBrandingInput": null
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  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
      }
    }
  }`,
  {
    variables: {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "checkoutBrandingInput": null
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  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
      }
    }
  }
QUERY

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

response = client.query(query: query, variables: variables)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "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
        }
      }
    }`,
    "variables": {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "checkoutBrandingInput": null
    },
  },
});

Response

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

Reset color schemes to the defaults

Description

Remove the customizations made to a color scheme and reset the scheme to the defaults.

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
    }
  }
}

Variables

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

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"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 } } }",
 "variables": {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "checkoutBrandingInput": {
      "designSystem": {
        "colors": {
          "schemes": null
        }
      }
    }
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  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
      }
    }
  }`,
  {
    variables: {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "checkoutBrandingInput": {
            "designSystem": {
                "colors": {
                    "schemes": null
                }
            }
        }
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  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
      }
    }
  }
QUERY

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

response = client.query(query: query, variables: variables)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "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
        }
      }
    }`,
    "variables": {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "checkoutBrandingInput": {
            "designSystem": {
                "colors": {
                    "schemes": null
                }
            }
        }
    },
  },
});

Response

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

Set a checkout logo

Description

Modify the logo for checkout branding settings with a file already uploaded to Shopify (must not be of SVG format). Use the [fileCreate](/api/admin-graphql/unstable/mutations/fileCreate) mutation to upload a new image to Shopify.

Query

mutation SetLogo($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
  checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
    checkoutBranding {
      customizations {
        header {
          logo {
            image {
              url
            }
          }
        }
      }
    }
    userErrors {
      message
    }
  }
}

Variables

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

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"query": "mutation SetLogo($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) { checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) { checkoutBranding { customizations { header { logo { image { url } } } } } userErrors { message } } }",
 "variables": {
    "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
    "input": {
      "customizations": {
        "header": {
          "logo": {
            "image": {
              "mediaImageId": null
            }
          }
        }
      }
    }
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  mutation SetLogo($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
      checkoutBranding {
        customizations {
          header {
            logo {
              image {
                url
              }
            }
          }
        }
      }
      userErrors {
        message
      }
    }
  }`,
  {
    variables: {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "input": {
            "customizations": {
                "header": {
                    "logo": {
                        "image": {
                            "mediaImageId": null
                        }
                    }
                }
            }
        }
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  mutation SetLogo($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
      checkoutBranding {
        customizations {
          header {
            logo {
              image {
                url
              }
            }
          }
        }
      }
      userErrors {
        message
      }
    }
  }
QUERY

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

response = client.query(query: query, variables: variables)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "query": `mutation SetLogo($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
      checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
        checkoutBranding {
          customizations {
            header {
              logo {
                image {
                  url
                }
              }
            }
          }
        }
        userErrors {
          message
        }
      }
    }`,
    "variables": {
        "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
        "input": {
            "customizations": {
                "header": {
                    "logo": {
                        "image": {
                            "mediaImageId": null
                        }
                    }
                }
            }
        }
    },
  },
});

Response

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

checkoutBrandingUpsert reference

Examples

Open in GraphiQL

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {

const { admin } = await authenticate.admin(request);

const response = await admin.graphql(

`#graphql

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

}

}`,

{

variables: {

"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"

}

);

const json = await response.json();

return json.data;

}

GQL

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
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/unstable/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"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 } } }",
 "variables": {
    "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"
          }
        }
      }
    }
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  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
      }
    }
  }`,
  {
    variables: {
        "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"
                    }
                }
            }
        }
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "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
        }
      }
    }`,
    "variables": {
        "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"
                    }
                }
            }
        }
    },
  },
});

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  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
      }
    }
  }
QUERY

variables = {
  "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 = client.query(query: query, variables: variables)

Input variables

JSON

{

"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

JSON

{

"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": []

}