Skip to main content

Customize sections with Checkout and Accounts Configuration API

Plus

Checkout styling customizations are available only to Shopify Plus merchants.

This guide shows how to style sections through the Checkout and Accounts Configuration API. Section styling lives under branding.surfaces — 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. For the equivalent guide using checkoutBrandingUpsert, see Customize sections.

Anchor to RequirementsRequirements

Anchor to Style checkout's main sectionsStyle checkout's main sections

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL mutation

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

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

Anchor to Style the checkout header and footerStyle the checkout header and footer

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL mutation

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

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

Anchor to Style the order summaryStyle the order summary

POST https://{shop}.myshopify.com/api/{api_version}/graphql.json

GraphQL mutation

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

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

Anchor to Style customer accounts sectionsStyle 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

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

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

Anchor to Style sign-in sectionsStyle 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

mutation UpdateSignInSections($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": {
"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"
}
}
}
}
}
}
}
}

Anchor to Differences from the Checkout Branding APIDifferences from the Checkout Branding API

Checkout Branding APICheckout and Accounts Configuration API
customizations.main.sectionbranding.surfaces.checkout.components.main.section
customizations.headerbranding.surfaces.checkout.components.header
customizations.footerbranding.surfaces.checkout.components.footer
customizations.orderSummarybranding.surfaces.checkout.components.orderSummary
Colors via colorScheme referencesDirect colors object on each component
Section styling for checkout onlyPer-surface section styling (checkout, customer accounts, sign-in)
N/Ashadow property on sections (NONE, SMALL_100, SMALL_200, BASE)
N/AbackgroundImage on sign-in main area

Anchor to Next stepsNext steps

  • Explore the GraphQL Admin API to learn more about customizing styling sections across checkout, customer accounts, and sign-in.
Was this page helpful?