Skip to content
Search Articles/

less than a minute read • Updated 9 minutes ago

Add custom CSS to the cart

How to customize the appearance of the Foxy cart and sidecart using CSS.

You can customise the appearance of the Foxy cart and sidecart by adding your own CSS. The sidecart’s styles are namespaced under a #fc ID to prevent your site’s CSS from affecting the cart unintentionally — this same namespace is what you use to target cart elements with your own styles.

How to set it up

  1. 1

    Go to the Foxy admin

  2. 2

    Go to Settings > Templates

  3. 3

    Add your custom CSS to the Custom header section

  4. 4

    Save your changes

Targeting cart elements

All cart elements are namespaced under #fc. Prefix your CSS rules with #fc to target them:

#fc .fc-item-name {
  font-weight: bold;
}

#fc .fc-cart-button {
  background-color: #ff0000;
}

Notes

  • Because the sidecart loads within your own site, CSS rules on your site can bleed into the cart if they are broad enough. The #fc namespace is designed to prevent this, but overly broad rules (e.g. * { box-sizing: border-box; }) may still apply.

  • If your site has CSS rules targeting direct descendants of body (e.g. body > div), these may behave unexpectedly with the sidecart since it wraps page content in a container element. Add body > [data-fc-store-page] > div alongside your existing rules to account for this.

  • For sidecart-specific display problems, see Troubleshoot sidecart display issues.

Need Help?

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