Skip to main content

Colors

Colors​

Customize the color scheme of your entire store. These settings are found under Theme Settings → Colors in the Theme Editor.

All color settings accept any valid color value. Changes apply globally across your theme.

General​

  • Background — Main background color of the store.
  • Headings text — Color used for all heading elements.
  • Body text — Color used for body text and paragraphs.
  • Body text light — Color used for secondary or lighter body text.
  • Links — Default color for text links.
  • Links active — Color for links on hover or active state.
  • Border — Color used for borders and dividers throughout the theme.
  • Action text — Text color for action elements like badges and labels.
  • Action background — Background color for action elements.

Header & Menu​

  • Header text — Text color in the site header.
  • Header background — Background color of the site header.
  • Menu text — Text color in the navigation menu and mobile drawer.
  • Menu background — Background color of the navigation menu and mobile drawer.

Buttons​

Primary Button​

  • Background — Background color of the primary button.
  • Text — Text color of the primary button.
  • Text hover — Text color on hover.
  • Background hover — Background color on hover.

Secondary Button​

  • Background — Background color of the secondary button.
  • Border — Border color of the secondary button.
  • Text — Text color of the secondary button.
  • Text hover — Text color on hover.
  • Background hover — Background color on hover.

Product Card​

  • Price — Color of the product price.
  • Sale price — Color of the discounted sale price.
  • Brand — Color of the product brand/vendor name.
  • Star rating — Color of the star rating icons.
  • Sale badge text — Text color of the sale badge.
  • Sale badge background — Background color of the sale badge.
  • Sold out text — Text color of the sold out badge.
  • Sold out background — Background color of the sold out badge.

Inputs & Feedback​

  • Input text — Text color inside form fields.
  • Input background — Background color of form fields.
  • Input border — Border color of form fields.
  • Input placeholder — Color of placeholder text in form fields.
  • Success text — Text color for success messages.
  • Success background — Background color for success messages.
  • Success border — Border color for success messages.
  • Error text — Text color for error messages.
  • Error background — Background color for error messages.
  • Error border — Border color for error messages.
  • Footer background — Background color of the site footer.
  • Footer text — Text color in the site footer.