Anchor to section titled 'undefined'

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 section titled 'Arguments'

Arguments

Anchor to checkoutBrandingInput
checkoutBrandingInput
CheckoutBrandingInput

The input fields to use to upsert the checkout branding settings (pass null to reset them to default).

Anchor to checkoutProfileId
checkoutProfileId
ID!
required

A globally-unique identifier.

Was this section helpful?
Anchor to section titled 'CheckoutBrandingUpsertPayload returns'

CheckoutBrandingUpsertPayload returns

Anchor to CheckoutBrandingUpsertPayload.checkoutBranding
checkoutBranding
CheckoutBranding

Returns the new checkout branding settings.

Anchor to CheckoutBrandingUpsertPayload.userErrors
userErrors
[CheckoutBrandingUpsertUserError!]!
non-null

The list of errors that occurred from executing the mutation.

Was this section helpful?

Examples

Hide code
Copy
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/2025-01/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();

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)

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

use Shopify\Clients\Graphql;

$client = new Graphql("your-development-store.myshopify.com", $accessToken);
$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]);
Hide code
Input variables
Copy
{
  "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"
        }
      }
    }
  }
}
Hide code
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": []
  }
}