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.
RequirementsAnchor 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 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
- You're using API version
- You're familiar with the GraphQL Admin API's branding types.
Step 1: Retrieve the store's checkout profile IDsAnchor link to section titled "Step 1: Retrieve the store's checkout profile IDs"
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.
checkoutProfilesto retrieve a list of checkout profile IDs.
is_publishedparameter 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 colorsAnchor link to section titled "Step 2: Configure global colors"
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
Textcomponent 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
accent colors to match a shop's visual identity:
Step 3: Configure color schemesAnchor 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.
base- Used for the surface background, text, links and more.
control- Used for
ChoiceListand 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:
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.
Step 4: Apply color schemesAnchor link to section titled "Step 4: Apply color schemes"
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.