Need help?

Can't find what you are looking for? We are here to help and offer the following methods of getting in touch and support:

◂ Back To FAQ

How do I style the cart?


Good question. It’s slightly tricky but once you get it it’ll make sense.

The issue is that the thickbox + cart is two separate pieces:

  1. The HTML generated that’s part of your site’s <body>, which is where the “close” and “x” links are.
  2. The iframe inside the modal window, which is an entirely separate HTML page, and cannot be styled by the parent frame’s CSS.


So, if you want to customize the cart itself, you need to add your new CSS to the cart template (as pasted in or cached in the FoxyCart admin). If you want to customize the “framing” of the modal window (Thickbox aka FoxyBox), then you do that on the CSS on your own site, as it’s overriding the foxybox.css file that you would (typically) include on your own site.

Also, the FoxyCart-provided styles.css should be on the cart, checkout, and receipt, but does not need to be on your end, since it won’t really apply to anything.

Finally, if you want to override much of the CSS we recommend starting with the “text” not the “standard” theme, as it’s easier to work with. If you like the “standard” and just want to change some images or something, go for it, but if you’re going to do open heart CSSsurgery on it, just use the text theme.

More information on customizing CSS and templates on FoxyCart is available on ourscreencasts, particularly #2 and #3.