Styling Caddy with CSS custom properties

Every color and size in the Caddy cart is driven by CSS custom properties defined on :root. Instead of fighting selectors and specificity, restyle the cart by overriding a handful of variables — Caddy’s own stylesheets reference them everywhere, so one override restyles every element that uses it.

How to override

Add overrides under Caddy > Settings > Styles > Custom CSS, or in your child theme’s stylesheet. Scope them to body so they reliably out-rank the defaults regardless of load order:

body {
	--cc-window-bg-color: #faf8f5;
	--cc-checkout-button-bg-color: #5e4ccf;
	--cc-checkout-button-hover-bg-color: #4a3ba8;
	--cc-compass-bg-color: #5e4ccf;
	--cc-border-radius: 8px;
}

Note for Caddy Pro users: the style customizer writes these same variables. Use one or the other for any given property — a CSS override scoped to body wins over Customizer values, which can be confusing if someone edits colors in the Customizer later and nothing changes.

Cart window

--cc-window-width: 520px;
--cc-window-bg-color: #fff;
--cc-window-text-color: #000;
--cc-window-muted-text-color: #777;
--cc-window-link-color: #000;
--cc-window-link-hover-color: #313131;
--cc-window-border-color: #dedede;
--cc-window-border-width: 1px;

Header & navigation

--cc-header-bg-color: #fff;
--cc-menu-link-color: #636363;
--cc-menu-link-hover-color: #000;
--cc-active-menu-color: #000;
--cc-icon-color: #000;

Floating cart bubble & count badge

--cc-compass-bg-color: #000;           /* closed state */
--cc-compass-cart-icon-color: #fff;
--cc-compass-open-bg-color: #fff;      /* open state */
--cc-compass-close-icon-color: #000;
--cc-cart-count-bg-color: #12b97c;
--cc-cart-count-text-color: #fff;

Buttons

/* Primary buttons */
--cc-primary-button-bg-color: #000;
--cc-primary-button-text-color: #fff;
--cc-primary-button-hover-bg-color: #313131;
--cc-primary-button-hover-text-color: #fff;
--cc-button-border-radius: 8px;

/* Checkout button */
--cc-checkout-button-bg-color: #000;
--cc-checkout-button-text-color: #fff;
--cc-checkout-button-hover-bg-color: #313131;
--cc-checkout-button-hover-text-color: #fff;
--cc-checkout-button-icon-color: #fff;

/* Coupon button */
--cc-coupon-button-bg-color: #efefef;
--cc-coupon-button-text-color: #000;
--cc-coupon-button-hover-bg-color: #000;
--cc-coupon-button-hover-text-color: #fff;
--cc-coupon-button-border-color: #bdbdbd;
--cc-coupon-button-border-hover-color: #000;
--cc-coupon-button-border-width: 1px;

Free shipping / rewards meter

--cc-meter-color: #37a7c1;
--cc-meter-completed-color: #1dc487;
--cc-mint-color: #12b97c;
--cc-error-color: #b81c23;

Recommendation slides

--cc-rec-slide-bg-color: #fff;
--cc-rec-slide-text-color: #000;
--cc-rec-slide-link-color: #000;
--cc-rec-slide-link-hover-color: #313131;
--cc-rec-slide-border-color: #dedede;
--cc-rec-slide-border-width: 1px;

Announcement bar

--cc-announcement-bar-bg-color: #272727;
--cc-announcement-bar-text-color: #fff;
--cc-announcement-bar-link-color: #fff;

Sizing

--cc-thumb-width-d: 95px;   /* product thumbnails, desktop */
--cc-thumb-width-m: 70px;   /* product thumbnails, mobile */
--cc-border-radius: 3px;    /* general corner radius */

Caddy Pro defines a few additional variables for the save-for-later buttons on shop and product pages (--cc-sfl-btn-* and --cc-archive-sfl-btn-* for background, text, and hover colors) when those buttons are enabled.

For anything a variable doesn’t cover, regular CSS rules work too — see how to add custom CSS in Caddy.