This guide shows you how to apply your own CSS to the SmartSize fit quiz and size chart popups so they match your store's branding.

Why a dedicated setting

Both popups render inside a Shadow DOM. That isolates them from your theme so the popups always look the way SmartSize intends — but it also means CSS placed in your theme stylesheet (or a page <style> tag) cannot reach inside the popups.

To style the popups, paste your CSS into the Custom CSS field in SmartSize. SmartSize injects it directly inside both popups, where it takes effect. A single field is shared by the fit quiz popup and the size chart popup — both use the same smartrecom- class names.

Before you start

You need:

Access to the SmartSize admin.
The class name of the element you want to style. See the CSS customization reference for the full list.

Steps

In the SmartSize admin, open Settings → Global settings.
In the left navigation, under General settings, select Custom CSS.
Paste your CSS rules into the Custom CSS field. Target SmartSize classes, which all start with smartrecom-.
Click Save.
Open a storefront product page where a popup appears and reload it. Open the popup to confirm your styles applied.

Worked example

This recolors the popup background and the primary quiz button to match a warm brand palette:

/* Popup card background (both popups) */
.smartrecom-modal-content {
  background: #fdf6ec;
}/* Primary action button in the fit quiz */
.smartrecom-button-primary {
  background: #c0392b;
  color: #ffffff;
}/* Size chart table header row */
.smartrecom-table-header {
  background: #c0392b;
  color: #ffffff;
}/* Size chart popup background — table body cells are transparent,
   so this color shows through the table as well */
.smartrecom-sizechart-header,
.smartrecom-sizechart-body {
  background: #fdf6ec !important;
}/* The sticky first table column stays opaque (columns scroll
   underneath it) — match it with this variable */
.smartrecom-sizechart {
  --smartrecom-table-sticky-bg: #fdf6ec;
}

Making your rule win (read this first)

This is the single most common reason a rule "does nothing." SmartSize applies some styles as inline styles on the element itself (and a few with !important) so the popups survive hostile theme CSS. In the browser's cascade, an inline style beats a plain class selector — so a rule like this is silently overridden:

/* ❌ Has no effect — loses to the element's inline font-family */
.smartrecom-sizechart {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

You have two ways to win:

1. Add !important. An !important declaration in your Custom CSS beats a normal inline style. This works for any property:

/* ✅ Wins */
.smartrecom-sizechart {
  font-family: "Comic Sans MS", "Comic Sans", cursive !important;
}

2. Set a CSS variable instead, where one exists. SmartSize reads some values from CSS variables, and a variable doesn't compete with inline styles — no !important needed. For example, the font family:

/* ✅ Wins, no !important needed */
.smartrecom-sizechart {
  --smartrecom-font-family: "Comic Sans MS", "Comic Sans", cursive;
}

The size chart also reads variables for its table colors (--smartrecom-table-sticky-bg, --smartrecom-table-text-color, --smartrecom-table-empty-color) and gutters. See the size chart CSS variables table for the full list.

After either change, save and reload the storefront page.

Rule of thumb: if a rule isn't taking effect, inspect the element (see Tips). If its style="…" attribute already sets the property you're changing, you need !important (or, for fonts, the --smartrecom-font-family variable above).

Tips

Find class names by inspecting. Open the popup, right-click an element, and choose Inspect. SmartSize classes start with smartrecom-.
Keep overrides cosmetic. Change colors, fonts, spacing, and borders. Avoid overriding layout, positioning, or animation — those keep the popup working correctly across themes and devices.
Test on mobile. The popups adapt to small screens; check your changes on a real device.

Style your popups with custom CSS