Skip to content

Style your popups with custom CSS

Guide type: Task guide
Difficulty: Intermediate
Applies to: SmartSize fit quiz popup, size chart popup

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

  1. In the SmartSize admin, open Settings → Global settings.
  2. In the left navigation, under General settings, select Custom CSS.
  3. Paste your CSS rules into the Custom CSS field. Target SmartSize classes, which all start with smartrecom-.
  4. Click Save.
  5. 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;
}

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. For fonts, set the font variable instead. SmartSize reads the font family from a CSS variable, so you can override the variable with no !important at all:

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

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.