> Shopify Plus:
> Checkout styling customizations are available only to [Shopify Plus](https://www.shopify.com/plus) merchants.
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](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert#examples-Reset_color_schemes_to_the_defaults) and [all](/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
- The store that you're modifying must be on a [Shopify Plus plan](https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plan).
- You've created a new [development store](/docs/api/development-stores#create-a-development-store-to-test-your-app) with the [Checkout and Customer Accounts Extensibility developer preview enabled](/docs/api/release-notes/developer-previews#enable-a-developer-preview).
- You can make [authenticated requests](/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](/docs/apps/build/scaffold-app), with the `read_checkout_branding_settings` and `write_checkout_branding_settings` [access scopes](/docs/api/usage/access-scopes).
- You're using API version `2024-04` or higher.
- You're familiar with the [GraphQL Admin API's branding types](/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](/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`](/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.
2. 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`](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) mutation's `customizations` object and the [`CheckoutBrandingInput`](/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.
## 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`](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) mutation's `designSystem` object and the [`CheckoutBrandingInput`](/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:
1. Assign the custom color scheme to the sections.
## Next steps
- Explore the [GraphQL Admin API](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) to learn more about customizing checkout's styling sections.
