Change button and accent colors

Steps

1. 1

   Copy a style rule targeting the elements you want to recolor. For example, to change the checkout and full-page cart background color:

<style>
#fc .fc-checkout, #fc .fc-context--cart-fullpage {
  background: #ec6725;
}
</style>

1. 1

   Go to the Foxy admin.

2. 2

   Go to Templates > Configuration.

3. 3

   Check Add custom header and footer code to your templates if it isn’t already checked, to reveal the custom header field.

4. 4

   Paste your style rule into the custom header field. If code is already present, add your style below it rather than replacing it.

5. 5

   Click Update to save.

6. 6

   Run a test purchase through the cart and checkout to confirm the change displays as expected.

Notes

• These instructions apply to the cart and checkout. The same approach — targeting the relevant class with your own custom header CSS — can be used to change any other element’s color, not just backgrounds.

• If you’re unfamiliar with locating the CSS selectors for specific elements, use your browser’s inspection tool to find the class you want to target, or contact support.

• A hex color picker can help you find the exact color value you want to use.