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.

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?

Apply section styles to main and order summary
Modify a color scheme
Modify checkout font settings
Modify global colors
Reset all styling to defaults
Reset color schemes to the defaults
Set a checkout logo
checkoutBrandingUpsert reference

Examples

1const { admin } = await authenticate.admin(request);
2
3const response = await admin.graphql(
4  `#graphql
5  mutation ApplySectionStyles($checkoutProfileId: ID!, $input: CheckoutBrandingInput!) {
6    checkoutBrandingUpsert(checkoutProfileId: $checkoutProfileId, checkoutBrandingInput: $input) {
7      checkoutBranding {
8        customizations {
9          main {
10            section {
11              cornerRadius
12              colorScheme
13              shadow
14              padding
15            }
16          }
17          orderSummary {
18            section {
19              colorScheme
20              shadow
21              padding
22              border
23            }
24          }
25        }
26      }
27      userErrors {
28        field
29        message
30      }
31    }
32  }`,
33  {
34    variables: {
35      "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
36      "input": {
37        "customizations": {
38          "main": {
39            "section": {
40              "cornerRadius": "LARGE",
41              "colorScheme": "COLOR_SCHEME2",
42              "shadow": "LARGE_200",
43              "padding": "LARGE_400"
44            }
45          },
46          "orderSummary": {
47            "section": {
48              "colorScheme": "COLOR_SCHEME1",
49              "shadow": "LARGE_200",
50              "padding": "LARGE_400",
51              "border": "FULL"
52            }
53          }
54        }
55      }
56    },
57  },
58);
59
60const data = await response.json();
61

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

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 data = await response.json();

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"
            }
          }
        }
      }
    },
  },
});

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

1{
2  "checkoutProfileId": "gid://shopify/CheckoutProfile/235093654",
3  "input": {
4    "customizations": {
5      "main": {
6        "section": {
7          "cornerRadius": "LARGE",
8          "colorScheme": "COLOR_SCHEME2",
9          "shadow": "LARGE_200",
10          "padding": "LARGE_400"
11        }
12      },
13      "orderSummary": {
14        "section": {
15          "colorScheme": "COLOR_SCHEME1",
16          "shadow": "LARGE_200",
17          "padding": "LARGE_400",
18          "border": "FULL"
19        }
20      }
21    }
22  }
23}

Response

JSON

1{
2  "checkoutBrandingUpsert": {
3    "checkoutBranding": {
4      "customizations": {
5        "main": {
6          "section": {
7            "cornerRadius": "LARGE",
8            "colorScheme": "COLOR_SCHEME2",
9            "shadow": "LARGE_200",
10            "padding": "LARGE_400"
11          }
12        },
13        "orderSummary": {
14          "section": {
15            "colorScheme": "COLOR_SCHEME1",
16            "shadow": "LARGE_200",
17            "padding": "LARGE_400",
18            "border": "FULL"
19          }
20        }
21      }
22    },
23    "userErrors": []
24  }
25}