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.

What you'll learn

Anchor link to section titled "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

Anchor link to section titled "Requirements"

The store that you're modifying must be on a Shopify Plus plan.
You've created a new development store with the Checkout and Customer Accounts Extensibility developer preview enabled.
You can make authenticated requests to the GraphQL Admin API.
You've either installed the GraphiQL app on your store or created an app, with the read_checkout_branding_settings and write_checkout_branding_settings access scopes.
You're using API version 2024-04 or higher.
You're familiar with the GraphQL Admin API's branding types.

Step 1: Retrieve the store's published checkout profile ID

Anchor link to section titled "Step 1: Retrieve the store's published checkout profile ID"

Checkout styling properties apply to a checkout profile ID. In this step, you'll retrieve the checkout profile to which you'll apply sections changes.

Query 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.
Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations.

Step 2: Style checkout's main sections

Anchor link to section titled "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 mutation's customizations object and the CheckoutBrandingInput input object.

The main sections at checkout displaying colors, square corners, padding, and a border

Step 3: Style sections with a custom color scheme

Anchor link to section titled "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 mutation's designSystem object and the CheckoutBrandingInput input object. When you apply that color scheme to sections, you'll do so with the customizations object.

Define the color scheme:
Assign the custom color scheme to the sections.

The color scheme applied to the header, footer, and main sections of checkout.

Next steps

Anchor link to section titled "Next steps"

Explore the GraphQL Admin API to learn more about customizing checkout's styling sections.