Customize form controls with Checkout and Accounts Configuration API
Plus
Checkout styling customizations are available only to Shopify Plus merchants.
Plus:
Checkout styling customizations are available only to Shopify Plus merchants.
This guide shows how to customize form controls through the Checkout and Accounts Configuration API. Form control customizations are configured under branding.components and apply across all surfaces (checkout, customer accounts, and sign-in).
For an introduction to the API, see About the Checkout and Accounts Configuration API. For the equivalent guide using checkoutBrandingUpsert, see Customize form controls.
Anchor to RequirementsRequirements
- You're authenticated with the GraphQL Admin API.
- Your app has access to the
read_checkout_and_accounts_configurationsandwrite_checkout_and_accounts_configurationsaccess scopes. - You have a Checkout and Accounts Configuration ID. To learn how to retrieve one, see About the Checkout and Accounts Configuration API.
Anchor to Set label position and corner radius for form controlsSet label position and corner radius for form controls
POST https://{shop}.myshopify.com/api/{api_version}/graphql.json
GraphQL mutation
mutation UpdateFormControls($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
configuration {
branding {
components {
control { labelPosition cornerRadius border }
}
}
}
userErrors { field message code }
}
}
Query variables
{
"id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
"configuration": {
"branding": {
"components": {
"control": {
"labelPosition": "OUTSIDE",
"cornerRadius": "LARGE",
"border": "FULL"
}
}
}
}
}
Anchor to Set the corner radius for checkboxesSet the corner radius for checkboxes
POST https://{shop}.myshopify.com/api/{api_version}/graphql.json
GraphQL mutation
mutation UpdateCheckbox($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
configuration {
branding {
components {
checkbox { cornerRadius }
}
}
}
userErrors { field message code }
}
}
Query variables
{
"id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
"configuration": {
"branding": {
"components": {
"checkbox": {
"cornerRadius": "BASE"
}
}
}
}
}
POST https://{shop}.myshopify.com/api/{api_version}/graphql.json
GraphQL mutation
mutation UpdatePrimaryButton($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
configuration {
branding {
components {
primaryButton {
cornerRadius
inlinePadding
blockPadding
border
typography { font weight letterCase size }
}
}
}
}
userErrors { field message code }
}
}
Query variables
{
"id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
"configuration": {
"branding": {
"components": {
"primaryButton": {
"cornerRadius": "NONE",
"inlinePadding": "BASE",
"blockPadding": "BASE",
"border": "NONE",
"typography": {
"font": "SECONDARY",
"weight": "BOLD",
"letterCase": "UPPER",
"size": "MEDIUM"
}
}
}
}
}
}
Anchor to Customize form control colorsCustomize form control colors
Form control colors are set through the shared semantic color role at components.shared.colors.control, which applies across all surfaces:
POST https://{shop}.myshopify.com/api/{api_version}/graphql.json
GraphQL mutation
mutation UpdateControlColors($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
configuration { id }
userErrors { field message code }
}
}
Query variables
{
"id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
"configuration": {
"branding": {
"components": {
"shared": {
"colors": {
"control": "#0F3460"
}
}
}
}
}
}
Anchor to Differences from the Checkout Branding APIDifferences from the Checkout Branding API
| Checkout Branding API | Checkout and Accounts Configuration API |
|---|---|
customizations.control | branding.components.control |
customizations.checkbox | branding.components.checkbox |
customizations.primaryButton | branding.components.primaryButton |
customizations.secondaryButton | branding.components.secondaryButton |
| Form control colors via color schemes | Direct colors field on components.control |
| Applies to checkout only | Applies across all surfaces (checkout, customer accounts, sign-in) |
Anchor to Next stepsNext steps
- Explore the GraphQL Admin API to learn more about customizing form controls across checkout, customer accounts, and sign-in.
Was this page helpful?