Skip to content
Search Articles/

less than a minute read • Updated 19 days ago

Change button and accent colors

How to quickly match the cart and checkout's buttons and accent colors to your brand using custom CSS, without needing to touch the rest of the template.

Change the button and accent colors on your cart and checkout using custom CSS.

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

    Go to the Foxy admin.

  3. 3

    Go to Templates > Configuration.

  4. 4

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

  5. 5

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

  6. 6

    Click Update to save.

  7. 7

    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.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.