less than a minute read • Updated 4 minutes ago
New Foxy Theme
Give your Foxy templates a fresh look and apply brand colors and styling with easy to use design tokens.
Overview
As of May 2026, we have a new Foxy theme available for stores to use. With a simple addition of some CSS you get a more modern, responsive design that can easily be configured with simple CSS variables.
Try It Out
Please click below to view the new theme with our FoxyThreads demo store:
Apply Theme
Applying the new theme to your Foxy store couldn't be easier. In the Foxy admin, go to Settings > Templates. Copy/paste the css from below:
<style>
/* DESIGN VARIABLES */
#fc {
/* ─── FONTS ─── */
--foxy-font-body: /* Body text, labels, inputs */
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--foxy-font-heading: /* Section headings, cart title */
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--foxy-font-weight-normal: 400; /* Body text, subtotal labels */
--foxy-font-weight-semi: 600; /* Buttons, item names, headings */
--foxy-font-weight-bold: 700; /* Legends, order total, receipt headings */
--foxy-font-size-heading: 17px; /* Section headings, cart title */
--foxy-font-size-body: 13px; /* Body text, labels, inputs, item options */
/* ─── COLORS ─── */
--foxy-background: #ffffff; /* Main surface — form panel, sidecart, receipt */
--foxy-sidebar-background: #fafafa; /* Right panel on desktop (cart summary side) */
--foxy-text: #1a1a1a; /* Primary text */
--foxy-text-muted: #707070; /* Helper text, "Remove" links, receipt labels */
--foxy-heading-color: #1a1a1a; /* All headings and legends */
--foxy-border: #e5e5e5; /* Item dividers, image outlines, table borders */
--foxy-divider: #e1e1e1; /* Vertical line between panels on desktop */
--foxy-radius: 8px; /* Corner rounding on buttons, inputs, alerts */
/* ─── PRIMARY BUTTON — Submit, Checkout, Continue, Go ─── */
--foxy-button-background: #1a1a1a; /* Fill color */
--foxy-button-text: #ffffff; /* Text and icon color */
--foxy-button-border: #1a1a1a; /* Border color */
--foxy-button-hover-background: #333333; /* Fill on hover */
--foxy-button-hover-text: #ffffff; /* Text on hover */
--foxy-button-hover-border: #333333; /* Border on hover */
/* ─── SECONDARY BUTTON — Continue Shopping, Cancel, Apply Coupon ─── */
--foxy-secondary-button-background: transparent; /* Outline style by default */
--foxy-secondary-button-text: #1a1a1a;
--foxy-secondary-button-border: #1a1a1a;
--foxy-secondary-button-hover-background: #1a1a1a; /* Inverts to solid on hover */
--foxy-secondary-button-hover-text: #ffffff;
--foxy-secondary-button-hover-border: #1a1a1a;
/* ─── INPUTS ─── */
--foxy-input-background: #ffffff; /* Input, select, textarea fill */
--foxy-input-text: #1a1a1a; /* Typed text */
--foxy-input-border: #e5e5e5; /* Border color */
--foxy-input-focus-border: #000000; /* Border when focused */
--foxy-button-focus-ring: 0 0 0 3px rgba(26,26,26,0.2); /* Glow around focused buttons */
/* ─── LINKS ─── */
--foxy-link-color: #1a1a1a; /* Link text color */
--foxy-link-hover-color: #545454; /* Link hover color */
--foxy-discount-color: #1a1a1a; /* Discount label and value text */
/* ─── ALERTS ─── */
--foxy-success-background: #e8f5e9;
--foxy-success-border: #c8e6c9;
--foxy-success-text: #2e7d32;
--foxy-warning-background: #fff8e1;
--foxy-warning-border: #ffecb3;
--foxy-warning-text: #e65100;
--foxy-info-background: #f0f0f0;
--foxy-info-border: #e0e0e0;
--foxy-info-text: #333333;
--foxy-danger-background: #fdecea;
--foxy-danger-border: #f5c6cb;
--foxy-danger-text: #b71c1c;
}
</style>
<link rel="stylesheet" href="https://cdn-js.foxy.io/website-helpers@1/foxy-styles/foxy-theme-overrides.css">Modify the design variables as needed and save changes. Now when you access any of your Foxy store pages (sidecart, full page cart, checkout, and web receipt) you should see the new theme applied. You may need to do a hard refresh or clear your browser's cache for changes to reflect.
Advanced Customizations
The design tokens make it super easy to customize colors, fonts, and more, but if you're wanting to do more advanced customizations, you can access the core CSS here.