Skip to main content
Anchor to CheckoutBrandingButtonColorRoles

CheckoutBrandingButtonColorRoles

object

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

•String

The color of accented objects (links and focused state).

•String

The color of the background.

•String

The color of borders.

•String

The decorative color for highlighting specific parts of the user interface.

•CheckoutBrandingColorRoles

The colors of the button on hover.

•String

The color of icons.

•String

The color of text.


Was this section helpful?