Apply colors

• The store that you're modifying must be on a Shopify Plus plan.
• You've created a new development store with the Checkout Extensibility preview enabled.
• You've completed the GraphQL and REST Admin API getting started guide.
• 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.

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.

1. 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.

2. Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations.

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

• brand - Used for the primary and secondary buttons, such as the Pay Now button.
• accent - Used for links and focus, such as Terms of Service.
• decorative - Used to highlight content in UI extensions such as the Text component using the decorative color.
• critical - Used to communicate a blocking error, such as Enter a valid card number.
• warning - Used to communicate something might be wrong but not blocking.
• success - Used to communicate a positive state.
• info - Used to communicate general information.

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:

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.

• base - Used for the surface background, text, links and more.
• control - Used for TextField, ChoiceList and other form controls.
• primaryButton - Used for the main payment button(s), such as Pay Now.
• secondaryButton - Used for secondary actions.

Every color group has the following overridable values:

• background
• border
• icon
• text
• accent
• decorative

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.

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

By default, the following schemes are used:

• scheme1 - Used for the primary surface, like the main area of checkout.
• scheme2 - Used for the secondary surface, like the order summary of checkout.

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

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