--- title: Customize sections description: >- Learn how to style the sections on checkout pages with the GraphQL Admin API's checkout branding types. source_url: html: 'https://shopify.dev/docs/apps/build/checkout/styling/customize-sections' md: 'https://shopify.dev/docs/apps/build/checkout/styling/customize-sections.md' api_name: checkout-ui-extensions --- # Customize sections **New API available:** This guide uses the [`checkoutBrandingUpsert`](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) mutation. To style sections per surface (checkout, customer accounts, and sign-in) through a single configuration, see [Customize sections (Checkout and Accounts Configuration API)](https://shopify.dev/docs/apps/build/checkout/styling/checkout-and-accounts-configuration/customize-sections). Sections logically organize groups of content at checkout. Section styling highlights or contours the look of a page, creating high visual impact and expressiveness in structured content. With section styles, you can define and add visual emphasis to sections by defining elements like color schemes, padding, border styles, and more. Well-styled sections make it unequivocally clear to customers where they are in the checkout process and where they can find essential information. This guide explains how to style common checkout sections, including the header, footer, main section, and order summary. You'll learn some sample customizations, but you can use what you've learned to make other sections customizations. **Note:** Borders around the sections in the following example represent the one-page checkout experience. In three-page checkout, each step has a single section, with the exception of express checkout options such as Shop Pay, Google Pay, and Apple Pay. **Tip:** You can reset styles to their defaults by writing parent fields to `null` with the GraphQL Admin API. Refer to examples of resetting [some](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_color_schemes_to_the_defaults) and [all](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_all_styling_to_defaults) values to the defaults. *** ## What you'll learn In this tutorial, you'll learn how to do the following tasks: * Retrieve the store's checkout profile ID. * Style checkout's main sections. * Define a custom color scheme, and apply this scheme to checkout sections. * Style the order summary section. *** ## Requirements * You've created a new [development store](https://shopify.dev/docs/apps/build/stores/development-stores#create-a-dev-store) with the [Shopify Plus plan](https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plan) enabled to be able to customize advanced branding. * You can make [authenticated requests](https://shopify.dev/docs/api/admin-graphql#authentication) to the GraphQL Admin API. * You've either [installed the GraphiQL app](https://shopify-graphiql-app.shopifycloud.com/login) on your store or [created an app](https://shopify.dev/docs/apps/build/scaffold-app), with the `read_checkout_branding_settings` and `write_checkout_branding_settings` [access scopes](https://shopify.dev/docs/api/usage/access-scopes#authenticated-access-scopes). * You're using API version `2024-04` or higher. * You're familiar with the [GraphQL Admin API's branding types](https://shopify.dev/docs/apps/build/checkout/styling#data-structures). *** ## Step 1: Retrieve the store's published checkout profile ID Checkout styling properties apply to a [checkout profile ID](https://shopify.dev/docs/apps/build/checkout/styling#checkout-profile). In this step, you'll retrieve the checkout profile to which you'll apply sections changes. 1. Query [`checkoutProfiles`](https://shopify.dev/docs/api/admin-graphql/latest/queries/checkoutProfiles) to retrieve a list of checkout profile IDs. The `is_published` parameter indicates which checkout profile is currently applied to your store's live checkout. ## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL query ```graphql query checkoutProfiles { checkoutProfiles(first: 1, query: "is_published:true") { edges { node { id name } } } } ``` ## JSON response ```json { "data": { "checkoutProfiles": { "edges": [ { "node": { "id": "gid://shopify/CheckoutProfile/1", "name": "Default checkout profile" } } ] } } } ``` 1. Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations. *** ## Step 2: Style checkout's main sections In this step, you'll apply one of the default color schemes to checkout's main sections. You'll also set the corner radius so that the sections have square corners, and add some padding and a border around them. For all of these customizations, you'll use the [`checkoutBrandingUpsert`](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) mutation's `customizations` object and the [`CheckoutBrandingInput`](https://shopify.dev/docs/api/admin-graphql/latest/input-objects/CheckoutBrandingInput) input object. **Tip:** Altering this section helps to distinguish it from other sections, so that customers can consume related information in smaller, more manageable segments. ## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL mutation ```graphql mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) { checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) { checkoutBranding { customizations { main { section { colorScheme cornerRadius padding border } } } } userErrors { field message } } } ``` ## Query variables ```json { "checkoutProfileId": "gid://shopify/CheckoutProfile/YOUR_CHECKOUT_PROFILE_ID_HERE", "checkoutBrandingInput": { "customizations": { "main": { "section": { "colorScheme": "COLOR_SCHEME2", "cornerRadius": "NONE", "padding": "LARGE_200", "border": "FULL" } } } } } ``` ## JSON response ```json { "data": { "checkoutBrandingUpsert": { "checkoutBranding": { "customizations": { "main": { "section": { "colorScheme": "COLOR_SCHEME2", "cornerRadius": "NONE", "padding": "LARGE_200", "border": "FULL" } } } }, "userErrors": [] } } } ``` ![The main sections at checkout displaying colors, square corners, padding, and a border](https://shopify.dev/assets/assets/images/apps/checkout/styling/sections/main-section-2x-Bq7s0nA9.png) *** ## Step 3: Style sections with a custom color scheme In this step, you'll define a third color scheme that you'll apply to some more checkout sections. Because you're defining a color scheme, you'll use the [`checkoutBrandingUpsert`](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) mutation's `designSystem` object and the [`CheckoutBrandingInput`](https://shopify.dev/docs/api/admin-graphql/latest/input-objects/CheckoutBrandingInput) input object. When you apply that color scheme to sections, you'll do so with the `customizations` object. **Tip:** Consistent styling across these sections amplifies the merchant's brand presence. 1. Define the color scheme: ## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL mutation ```graphql mutation ChangeColorScheme1($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) { checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) { checkoutBranding { designSystem { colors { schemes { scheme3 { base { background text border icon accent decorative }, control { background } } } } } } } } ``` ## Query variables ```json { "checkoutProfileId": "gid://shopify/CheckoutProfile/1", "checkoutBrandingInput": { "designSystem": { "colors": { "schemes": { "scheme3": { "base": { "background": "#F7FAF5", "text": "#44691E", "border": "#DCE9D3", "icon": "#44691E", "accent": "#44691E", "decorative": "#44691E" }, "control": { "background": "#F7FAF5" } } } } } } } ``` ## JSON response ```json { "data": { "checkoutBrandingUpsert": { "checkoutBranding": { "designSystem": { "colors": { "schemes": { "scheme3": { "base": { "background": "#f7faf5", "text": "#44691e", "border": "#dce9d3", "icon": "#44691e", "accent": "#44691e", "decorative": "#44691e" }, "control": { "background": "#f7faf5" } } } } } } } } } ``` 2. Assign the custom color scheme to the sections. ## POST https://{shop}.myshopify.com/api/{api\_version}/graphql.json ## GraphQL mutation ```graphql mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) { checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) { checkoutBranding { customizations { header { colorScheme } main { section { colorScheme } } footer { position colorScheme } } } } } ``` ## Query variables ```json { "checkoutProfileId": "gid://shopify/CheckoutProfile/YOUR_CHECKOUT_PROFILE_ID_HERE", "checkoutBrandingInput": { "customizations": { "header": { "colorScheme": "COLOR_SCHEME3" }, "main": { "section": { "colorScheme": "COLOR_SCHEME3" } }, "footer": { "position": "END", "colorScheme": "COLOR_SCHEME3" } } } } ``` ## JSON response ```json { "data": { "checkoutBrandingUpsert": { "checkoutBranding": { "customizations": { "header": { "colorScheme": "COLOR_SCHEME3" }, "main": { "section": { "colorScheme": "COLOR_SCHEME3" } }, "footer": { "position": "END", "colorScheme": "COLOR_SCHEME3" } } } } } } ``` ![The color scheme applied to the header, footer, and main sections of checkout.](https://shopify.dev/assets/assets/images/apps/checkout/styling/sections/custom-scheme-2x-C-6SBoq_.png) *** ## Next steps * Explore the [GraphQL Admin API](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) to learn more about customizing checkout's styling sections. ***