Skip to content
Search Articles/

less than a minute read • Updated 8 days ago

Change Background Color on Cart and Checkout

You can style the cart and checkout by adding CSS to your custom header. This article uses background color as the example, but the same approach works for any element.

Foxy has three cart and checkout surfaces: the sidecart, the full-page cart, and the checkout. They use different selectors, so styling one doesn't affect the others.

Steps

  1. 1

    Go to the Foxy admin

  2. 2

    Go to Settings > Templates

  3. 3

    In the Custom header field, add the CSS below. If there's already code there, add it without removing anything.

html

<style>
/* Checkout and full-page cart */
#fc .fc-checkout,
#fc .fc-context--cart-fullpage {
  background: yellow;
}

/* Sidecart */
[data-fc-sidecart],
[data-fc-sidecart] #fc-cart,
[data-fc-sidecart] #fc .fc-sidebar,
[data-fc-sidecart] #fc {
  background: yellow;
}
</style>
  1. 1

    Replace each yellow with the color you want

  2. 2

    Save your changes

  3. 3

    Add a product to the cart to check the sidecart, then continue to the full-page cart and checkout to confirm all three

Notes

  • Custom header accepts HTML and CSS only. It doesn't support Twig, which is fine for a <style> block. Twig and JavaScript go in Custom footer instead.

  • [data-fc-sidecart] is the outer sidecart wrapper and sits outside #fc, so it needs its own selector. If you leave it out, the panel behind the cart content keeps its default color.

  • Scope everything else to #fc. Foxy's own styles are specific enough that unscoped rules often lose, and scoping keeps your CSS off the rest of your site.

  • If a rule doesn't take effect, Foxy's #fc * reset is the usual cause. Raise specificity or add !important.

  • To find the selector for a different element, inspect the cart or checkout in your browser. If you're not comfortable with that, contact us.

Need Help?

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