Update color settings

This guide demonstrates how to design a color system that reflects your brand, using the GraphQL Admin API's checkout branding types and their associated fields. You'll learn some sample customizations, but you can use what you've learned to make other color customizations.

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 2023-10 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 color 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: Configure global colors

Anchor link to section titled "Step 2: Configure global colors"

The GraphQL Admin API's CheckoutBrandingColorGlobalInput enables you to quickly update the global colors to match your brand.

You'll also learn how to make granular color changes in a subsequent step.

The following code changes the global brand and accent colors to match a shop's visual identity:

Step 3: Configure color schemes

Anchor link to section titled "Step 3: Configure color schemes"

Configuring color schemes gives you a lot of flexibility when the default colors specified in step 1 need to change for a particular context like drawing attention to different checkout sections, or emphasizing content in a particular location. You can apply color schemes to different parts of the UI in step 3.

Color schemes are made up of color groups, and all components utilize values specified within these groups. This means that all UI extensions also use these values and automatically inherit your colors.

Every color group has the same set of overridable values. Refer to an example.

The following code applies shades of green to scheme1 that match the store's visual identity. The code sets a light green background, text that matches the logo, darker border controls, a dark selected state and makes the primary button hover state more prominent.

Screenshot that shows the application of color schemes

Step 4: Apply color schemes

Anchor link to section titled "Step 4: Apply color schemes"

Configuring color schemes to apply to different parts of the UI overrides the default color schemes.

Scheme applications are customizable. The following code changes the default scheme structure so that scheme1 can be applied to the order summary.

Scheme 1 applied to the order summary page, which now matches the store's visual identity

Next steps

Anchor link to section titled "Next steps"

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