Checkout
Requires access to checkout branding settings and the shop must be on a Plus plan or a Development store plan.
Creates a unified visual identity for your checkout that keeps customers engaged and reinforces your brand throughout the purchase process. This comprehensive branding system lets you control every visual aspect of checkout, from colors and fonts to layouts and imagery, so your checkout feels like a natural extension of your store.
For example, a luxury fashion retailer can configure their checkout with custom color palettes, premium typography, rounded corners for a softer feel, and branded imagery that matches their main website aesthetic.
Use the Branding object to:
- Configure comprehensive checkout visual identity
- Coordinate color schemes across all checkout elements
- Apply consistent typography and spacing standards
- Manage background imagery and layout customizations
- Control visibility of various checkout components
The branding configuration includes design system foundations like color roles, typography scales, and spacing units, plus specific customizations for sections, dividers, and interactive elements. This allows merchants to create cohesive checkout experiences that reinforce their brand identity while maintaining usability standards.
Different color schemes can be defined for various contexts, ensuring optimal contrast and accessibility across different checkout states and customer preferences.
Anchor to FieldsFields
- Anchor to customizationscustomizations•Checkout
Branding Customizations The customizations that apply to specific components or areas of the user interface.
- Anchor to designSystemdesign•Checkout
System Branding Design System The design system allows you to set values that represent specific attributes of your brand like color and font. These attributes are used throughout the user interface. This brings consistency and allows you to easily make broad design changes.
Anchor to QueriesQueries
- •query
Returns the visual customizations for checkout for a given checkout profile.
To learn more about updating checkout branding settings, refer to the checkoutBrandingUpsert mutation and the checkout branding tutorial.
Anchor to MutationsMutations
- •mutation
Updates the checkout branding settings for a checkout profile.
If the settings don't exist, then new settings are created. The checkout branding settings applied to a published checkout profile will be immediately visible within the store's checkout. The checkout branding settings applied to a draft checkout profile could be previewed within the admin checkout editor.
To learn more about updating checkout branding settings, refer to the checkout branding tutorial.