The SmartSize popups render inside a Shadow DOM, which isolates them so your theme never accidentally breaks them. The trade-off: CSS in your theme stylesheet can't reach inside the popups. To restyle them, paste your CSS into the Custom CSS field in SmartSize.
Where custom CSS applies
The Custom CSS field currently styles the size chart popup. SmartSize injects your stylesheet directly into that popup's Shadow DOM, where your rules take effect. All SmartSize classes start with smartrecom-.
To restyle the fit quiz button and popup, use the built-in appearance settings instead — accent color, corners, and recommendation format are all controlled from the theme editor and the quiz settings. See How to style your fit quiz button and the fit quiz customization articles.
Add your CSS
In the SmartSize admin, open Settings → Global settings.
Under General settings, select Custom CSS.
Paste your rules into the field, targeting
smartrecom-classes.Click Save.
Open a storefront product page, reload it, and open the size chart popup to confirm your styles applied.
Making a rule win
This is the single most common reason a rule seems to "do nothing." Some popup styles are applied as inline styles on the element (and a few use !important) so the popup survives hostile theme CSS. In the browser's cascade, an inline style beats a plain class selector — so a rule like this is silently overridden:
/* ❌ Loses to the element's inline style */
.smartrecom-sizechart { font-family: "Georgia", serif; }
You have two ways to win:
1. Add !important. An !important declaration beats a normal inline style, and works for any property:
/* ✅ Wins */
.smartrecom-sizechart { font-family: "Georgia", serif !important; }
2. Set a CSS variable, where one exists. SmartSize reads some values from CSS variables, and a variable doesn't compete with inline styles — no !important needed:
/* ✅ Wins, no !important needed */
.smartrecom-sizechart { --smartrecom-font-family: "Georgia", serif; }
Size chart classes
Class | Element |
| Root wrapper — set font and CSS variables here. |
| Sticky header area (heading blocks, unit toggle, tabs). |
| Scrollable body holding the active tab's blocks. |
| A tab button, and the currently selected tab. |
| The metric/imperial toggle and its options. |
| Content blocks: heading, paragraph, and callout. |
| The size chart table. |
| Header cells ( |
| The popup card (background, corners, shadow). |
| The background overlay behind the popup. |
| The close (✕) button. |
Table body cells have a transparent background by default, so a color set on the body or the popup card shows through the table — you don't need to restyle every cell to recolor the popup. Two exceptions paint their own background: striped rows (color set in the size chart editor) and the sticky first column, which stays opaque because the other columns scroll underneath it.
Size chart CSS variables
Set these on .smartrecom-sizechart (or any ancestor). Because they're variables, no !important is needed:
Variable | Controls |
| Font family for the size chart content. |
| Horizontal and top gutters of the header and body. |
| Opaque background of the sticky first column. |
| Table cell text color. |
| Placeholder (—) color in empty cells. |
Worked example: recolor the size chart popup
Because table cells are transparent, coloring the header and body recolors the whole popup. Only the sticky column and the text need the variables:
/* Surfaces carry inline styles, so use !important */
.smartrecom-sizechart-header,
.smartrecom-sizechart-body,
.smartrecom-modal-content {
background: #1a1a2e !important;
}
/* Sticky column and text — variables, no !important */
.smartrecom-sizechart {
--smartrecom-table-sticky-bg: #1a1a2e;
--smartrecom-table-text-color: #f0f0f0;
--smartrecom-table-empty-color: #6a6a7a;
}
/* Header row color comes from the editor (inline) */
.smartrecom-table-header {
background: #16213e !important;
color: #f0f0f0 !important;
}
What to keep cosmetic
Safe to change: colors, fonts, spacing, sizing, borders, and shadows. Avoid overriding layout (flex/grid internals), positioning and z-index, transforms, and animations — those keep the popup working correctly across themes and devices.
Troubleshooting
My rule isn't applying. Confirm you pasted it in Settings → Global settings → Custom CSS (theme CSS can't reach the Shadow DOM), that the class exists (open the popup and inspect the element), and add !important if a built-in inline style is winning. Reload the storefront page after saving.
💡 Tip: Find the exact class to target by opening the size chart popup, right-clicking the element, and choosing Inspect — every SmartSize class starts with smartrecom-.