less than a minute read • Updated 9 minutes ago

Add custom CSS and JS to your templates

How to add your own CSS and JavaScript to the cart, checkout, and receipt.

Add your own CSS and JavaScript to the cart, checkout, and receipt without editing the underlying template markup.

Steps

1
Go to the Foxy admin.
2
Go to Templates > Configuration.
3
Check Add custom header and footer code to your templates if it isn’t already checked, to reveal the custom header and custom footer fields.
4
Add your CSS inside a <style> tag, and your JavaScript inside a <script> tag, in the custom header or footer field. If code is already present in either field, add yours alongside it rather than replacing it.
5
Click Update to save.
6
Run a test purchase through the cart and checkout to confirm your changes display and behave as expected.

This is commonly used for custom styles, tracking codes, or other custom behavior — not for adding new checkout fields, which is covered separately.
To find the CSS classes for a specific element, use your browser’s inspection tool to view its markup.

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