Checkout Branding Button Color Roles
Requires access to checkout branding settings and the shop must be on a Plus plan or a Development store plan.
Defines the color palette specifically for button elements within checkout branding, including hover states. These color roles ensure buttons maintain proper contrast and visual hierarchy throughout the checkout experience.
For example, a sports brand might configure bright accent colors for primary action buttons, with darker hover states and contrasting text colors that maintain accessibility standards.
Use the object to:
- Define button color schemes for different states
- Ensure proper contrast for accessibility compliance
- Coordinate button colors with overall brand palette
Button color roles include background, border, text, icon, accent (for focused states), and decorative elements, plus specific hover state colors that provide clear interactive feedback to customers.
Anchor to FieldsFields
- Anchor to accentaccent•String
The color of accented objects (links and focused state).
- Anchor to backgroundbackground•String
The color of the background.
- Anchor to borderborder•String
The color of borders.
- Anchor to decorativedecorative•String
The decorative color for highlighting specific parts of the user interface.
- Anchor to hoverhover•Checkout
Branding Color Roles The colors of the button on hover.
- Anchor to iconicon•String
The color of icons.
- Anchor to texttext•String
The color of text.