---
title: Customize sections with Checkout and Accounts Configuration API
description: >-
  Learn how to style sections per surface — checkout, customer accounts, and
  sign-in — using the Checkout and Accounts Configuration API.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration/customize-sections
  md: >-
    https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration/customize-sections.md
api_name: checkout-ui-extensions
---

# Customize sections with Checkout and Accounts Configuration API

**Plus:**

Checkout styling customizations are available only to [Shopify Plus](https://www.shopify.com/plus) merchants.

This guide shows how to style sections through the Checkout and Accounts Configuration API. Section styling lives under [`branding.surfaces`](https://shopify.dev/docs/api/admin-graphql/latest/input-objects/CheckoutAndAccountsConfigurationBrandingSurfacesInput) — each surface (checkout, customer accounts, sign-in) has its own section customizations.

For an introduction to the API, see [About the Checkout and Accounts Configuration API](https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration). For the equivalent guide using `checkoutBrandingUpsert`, see [Customize sections](https://shopify.dev/docs/apps/build/checkout/styling/customize-sections).

***

## Requirements

* You're [authenticated with the GraphQL Admin API](https://shopify.dev/docs/apps/build/authentication-authorization).
* Your app has access to the `read_checkout_and_accounts_configurations` and `write_checkout_and_accounts_configurations` access scopes.
* You have a Checkout and Accounts Configuration ID. To learn how to retrieve one, see [About the Checkout and Accounts Configuration API](https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration).

***

## Style checkout's main sections

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL mutation

```graphql
mutation UpdateSections($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
  checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
    configuration {
      branding {
        surfaces {
          checkout {
            components {
              main { section { cornerRadius padding border background shadow } }
            }
          }
        }
      }
    }
    userErrors { field message code }
  }
}
```

## Query variables

```json
{
  "id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
  "configuration": {
    "branding": {
      "surfaces": {
        "checkout": {
          "components": {
            "main": {
              "colors": {
                "base": { "background": "#F7FAF5", "text": "#44691E" }
              },
              "section": {
                "cornerRadius": "NONE",
                "padding": "BASE",
                "border": "FULL",
                "borderStyle": "SOLID",
                "borderWidth": "BASE",
                "background": "BASE"
              }
            }
          }
        }
      }
    }
  }
}
```

***

## Style the checkout header and footer

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL mutation

```graphql
mutation UpdateHeaderFooter($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
  checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
    configuration {
      branding {
        surfaces {
          checkout {
            components {
              header { alignment background position divided padding colors { base { background text accent border icon decorative } } }
              footer { alignment position divided padding colors { base { background text } } }
            }
          }
        }
      }
    }
    userErrors { field message code }
  }
}
```

## Query variables

```json
{
  "id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
  "configuration": {
    "branding": {
      "surfaces": {
        "checkout": {
          "components": {
            "header": {
              "alignment": "CENTER",
              "background": "BASE",
              "position": "START",
              "divided": true,
              "padding": "BASE",
              "colors": {
                "base": {
                  "background": "#F7FAF5",
                  "text": "#44691E",
                  "accent": "#44691E",
                  "border": "#DCE9D3",
                  "icon": "#44691E",
                  "decorative": "#44691E"
                }
              }
            },
            "footer": {
              "alignment": "CENTER",
              "position": "END",
              "divided": true,
              "padding": "BASE",
              "colors": {
                "base": {
                  "background": "#F7FAF5",
                  "text": "#44691E"
                }
              }
            }
          }
        }
      }
    }
  }
}
```

***

## Style the order summary

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL mutation

```graphql
mutation UpdateOrderSummary($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
  checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
    configuration {
      branding {
        surfaces {
          checkout {
            components {
              orderSummary {
                colors { base { background text } }
                section { cornerRadius padding border background }
              }
            }
          }
        }
      }
    }
    userErrors { field message code }
  }
}
```

## Query variables

```json
{
  "id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
  "configuration": {
    "branding": {
      "surfaces": {
        "checkout": {
          "components": {
            "orderSummary": {
              "colors": {
                "base": { "background": "#F7FAF5", "text": "#44691E" }
              },
              "section": {
                "cornerRadius": "NONE",
                "padding": "BASE",
                "border": "FULL",
                "background": "BASE"
              }
            }
          }
        }
      }
    }
  }
}
```

***

## Style customer accounts sections

The API enables section customization for customer accounts, including shadow effects for card-like layouts:

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL mutation

```graphql
mutation UpdateAccountsSections($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
  checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
    configuration {
      branding {
        surfaces {
          customerAccounts {
            components {
              header { alignment padding colors { base { background text } } }
              main {
                colors { base { background text } }
                section {
                  background cornerRadius padding border shadow
                  colors { base { background } }
                }
              }
              footer { alignment padding }
            }
          }
        }
      }
    }
    userErrors { field message code }
  }
}
```

## Query variables

```json
{
  "id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
  "configuration": {
    "branding": {
      "surfaces": {
        "customerAccounts": {
          "components": {
            "header": {
              "alignment": "CENTER",
              "padding": "BASE",
              "colors": {
                "base": { "background": "#FFFFFF", "text": "#1A1A2E" }
              }
            },
            "main": {
              "colors": {
                "base": { "background": "#F8F8F8", "text": "#1A1A2E" }
              },
              "section": {
                "background": "BASE",
                "cornerRadius": "BASE",
                "padding": "BASE",
                "border": "FULL",
                "shadow": "SMALL_200",
                "colors": {
                  "base": { "background": "#FFFFFF" }
                }
              }
            },
            "footer": {
              "alignment": "CENTER",
              "padding": "BASE"
            }
          }
        }
      }
    }
  }
}
```

***

## Style sign-in sections

The sign-in surface supports a background image on the main area for immersive sign-in experiences:

## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json

## GraphQL mutation

```graphql
mutation UpdateSignInSections($id: ID!, $configuration: CheckoutAndAccountsConfigurationInput!) {
  checkoutAndAccountsConfigurationUpdate(id: $id, configuration: $configuration) {
    configuration { id }
    userErrors { field message code }
  }
}
```

## Query variables

```json
{
  "id": "gid://shopify/CheckoutAndAccountsConfiguration/YOUR_CONFIG_ID_HERE",
  "configuration": {
    "branding": {
      "surfaces": {
        "signIn": {
          "components": {
            "header": {
              "logo": {
                "image": { "mediaImageId": "gid://shopify/MediaImage/YOUR_LOGO_ID" },
                "maxWidth": 80
              },
              "padding": "BASE"
            },
            "main": {
              "backgroundImage": { "mediaImageId": "gid://shopify/MediaImage/YOUR_BG_IMAGE_ID" },
              "colors": {
                "base": { "background": "#1A1A2E", "text": "#FFFFFF" },
                "primaryButton": { "background": "#E94560", "text": "#FFFFFF" }
              },
              "section": {
                "cornerRadius": "LARGE",
                "padding": "LARGE",
                "shadow": "BASE",
                "background": "BASE"
              }
            }
          }
        }
      }
    }
  }
}
```

***

## Differences from the Checkout Branding API

| Checkout Branding API | Checkout and Accounts Configuration API |
| - | - |
| `customizations.main.section` | `branding.surfaces.checkout.components.main.section` |
| `customizations.header` | `branding.surfaces.checkout.components.header` |
| `customizations.footer` | `branding.surfaces.checkout.components.footer` |
| `customizations.orderSummary` | `branding.surfaces.checkout.components.orderSummary` |
| Colors via `colorScheme` references | Direct `colors` object on each component |
| Section styling for checkout only | Per-surface section styling (checkout, customer accounts, sign-in) |
| N/A | `shadow` property on sections (NONE, SMALL\_100, SMALL\_200, BASE) |
| N/A | `backgroundImage` on sign-in main area |

***

## Next steps

* Explore the [GraphQL Admin API](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutAndAccountsConfigurationUpdate) to learn more about customizing styling sections across checkout, customer accounts, and sign-in.

***