A complete reference for every CSS class in the SmartSize storefront widgets. Use these classes to customize the quiz and size chart appearance to match your store branding.
How to add custom CSS
Both popups render inside a Shadow DOM to isolate them from your theme's styles. A welcome side effect is that your theme never accidentally breaks the popup — but it also means CSS in your theme stylesheet cannot reach inside the popups. A rule like .smartrecom-button-primary { … } placed in your theme will have no effect.
Instead, add your CSS in the SmartSize admin:
Open Settings → Global settings → Custom CSS.
Paste your rules into the Custom CSS field.
Save. SmartSize injects your stylesheet directly inside both popups' Shadow DOM, so your rules apply.
A single Custom CSS field is shared by the fit quiz popup and the size chart popup — both use the same smartrecom- class namespace, so one stylesheet can target either. All SmartSize classes start with smartrecom- to avoid conflicts.
!important is often required. Many elements carry inline styles (and a few use !important) so the popups survive hostile theme CSS — and an inline style beats a plain class selector. If a rule doesn't take effect, add !important to it. For fonts, you can instead set the --smartrecom-font-family variable on a container, which the widget reads without needing !important. See Style your popups with custom CSS for worked examples.
For a step-by-step walkthrough with a worked example, see Style your popups with custom CSS.
Understanding button types
SmartSize uses three categories of buttons. Target the correct class for your desired changes.
.smartrecom-main-button
The storefront trigger button that appears on product pages (outside the popup).
Location: On your product pages
Behavior: Starts hidden and only appears after API validation confirms a quiz exists
Styling: Can be customized through Shopify settings or CSS
.smartrecom-button and .smartrecom-button-primary
Internal quiz buttons inside the popup (Next, Back, Calculate).
Location: Inside the quiz popup
Behavior: Always visible when the quiz is open
Styling: Controlled through CSS classes
Custom external buttons
Your own buttons that trigger SmartSize via window.SmartRecom.openModal() or the .smartrecom-trigger class.
Location: Anywhere on your site where you place them
Behavior: Trigger the quiz using your own custom code
Styling: You have full control — these are your own elements
Quiz container and navigation
Class | Element | Common customizations |
| Main quiz container |
|
| Step indicator container at the top of the quiz |
|
| Product title shown above the quiz |
|
| Footer container with navigation buttons |
|
| Left section of footer (Back button) | Alignment and spacing |
| Center section of footer | Alignment and spacing |
| Right section of footer (Next/Calculate button) | Alignment and spacing |
Step indicators and progress
Class | Element | Common customizations |
| Container for progress dots |
|
| Individual progress dot |
|
| Progress bar track |
|
| Progress bar fill |
|
Measurement step
Class | Element | Common customizations |
| Main measurements step container |
|
| "ENTER A FEW DETAILS BELOW" title |
|
| Step subtitle text |
|
| Imperial height input container (feet/inches) |
|
| Unit labels (feet, inches, cm, kg, lb) |
|
| Next button container |
|
Multiple choice steps
Class | Element | Common customizations |
| Main multiple choice container |
|
| Step question title |
|
| Container for all options |
|
| Individual option button |
|
| Option hover state |
|
| Images in options |
|
| Text container in options |
|
| Option label text |
|
| Option description text |
|
| Chevron arrows in options |
|
Bra size step
Class | Element | Common customizations |
| Main bra size step container |
|
| Step title |
|
| Step subtitle |
|
| Form group containers |
|
| Form labels |
|
| Container for size buttons |
|
| Individual size button (band/cup) |
|
| Selected size button |
|
| Dropdown selects |
|
| Grid layout for input method options |
|
| Input method option buttons |
|
| Custom radio buttons |
|
| Helper text |
|
| Error messages |
|
Size recommendation step
Class | Element | Common customizations |
| Main results container |
|
| Results title |
|
| Large recommended size display |
|
| Recommendation message |
|
| Additional recommendation text |
|
| Button container |
|
| Action buttons |
|
| Loading spinner |
|
| Progress bars container |
|
| Individual progress bar |
|
| Restart quiz link |
|
UI components
Class | Element | Common customizations |
| Trigger button on product pages |
|
| Internal quiz buttons (Next, Back) |
|
| Primary action buttons |
|
| Secondary action buttons |
|
| Input card container |
|
| Card input labels |
|
| Card input fields |
|
| Focused input |
|
| Unit labels in cards |
|
| Unit toggle switch container |
|
| Toggle option button |
|
| Selected toggle option |
|
| Error/warning messages |
|
| Warning icons |
|
Modal (both popups)
Shared by the fit quiz popup and the size chart popup.
Class | Element | Common customizations |
| Fullscreen background overlay behind the popup |
|
| Popup content container (the "card") |
|
| Scrollable body region of the fit quiz popup |
|
| Close (✕) button in the top corner |
|
Size chart popup
The size chart popup renders the merchant-authored content blocks. These classes apply to the size chart, not the fit quiz.
Class | Element | Common customizations |
| Root size chart wrapper |
|
| Sticky header area (header blocks, unit toggle, tabs) |
|
| Scrollable body holding the active tab's blocks |
|
| Container for the tab buttons |
|
| Individual tab button |
|
| The currently selected tab (applied alongside |
|
| Metric/imperial toggle container |
|
| A unit toggle option |
|
Size chart content blocks
Class | Element | Common customizations |
| Heading block |
|
| Text / paragraph block |
|
| Callout block (tip / warning / info) |
|
| Scroll container around a table block |
|
| The size chart |
|
| Table header cells ( |
|
| Table body cells ( |
|
Table body cells have a transparent background by default, so a background set on .smartrecom-sizechart-body (or .smartrecom-modal-content) shows through the table — you don't need to restyle every cell to recolor the popup. Two exceptions paint their own background: striped rows (the stripe color configured in the size chart editor) and the sticky first column, which must stay opaque because the other columns scroll underneath it. Match the sticky column to a custom background with the --smartrecom-table-sticky-bg variable below.
Size chart CSS variables
The size chart reads these CSS custom properties. Set them on .smartrecom-sizechart (or any ancestor, such as .smartrecom-modal-content) — variables don't compete with inline styles, so no !important is needed:
Variable | Default | Controls |
|
| Font family for the size chart content |
|
| Horizontal gutter of the popup header and body |
|
| Top gutter of the popup header and body |
|
| Opaque background of the sticky first table column |
|
| Table cell text color |
|
| Placeholder (—) color in empty table cells |
Complete example rules
Brand color scheme
/* Update all primary elements to your brand color */
.smartrecom-button-primary,
.smartrecom-main-button,
.smartrecom-size-recommendation-size,
.smartrecom-card-input:focus {
background-color: #your-brand-color !important;
border-color: #your-brand-color !important;
}/* Update progress elements */
.smartrecom-progress-bar-fill,
.smartrecom-step-indicator-dot.active {
background-color: #your-brand-color !important;
}/* Update selected states */
.smartrecom-multiple-choice-option.selected,
.smartrecom-bra-size-button.selected {
border-color: #your-brand-color !important;
background-color: #your-brand-color !important;
}
Typography override
/* Apply your brand font */
.smartrecom-quiz-manager {
font-family: 'Your Brand Font', sans-serif;
}/* Adjust title sizes */
.smartrecom-measurements-title,
.smartrecom-multiple-choice-title,
.smartrecom-bra-size-title {
font-size: 32px;
font-weight: 300;
}
Mobile adjustments
@media (max-width: 768px) {
.smartrecom-quiz-manager {
padding: 16px 12px;
} .smartrecom-measurements-title,
.smartrecom-multiple-choice-title,
.smartrecom-bra-size-title {
font-size: 24px;
} .smartrecom-multiple-choice-option {
padding: 16px;
}
}
Recolor the size chart popup
Table cells are transparent, so coloring the header and body recolors the whole popup. Only the sticky first column and the text colors need the variables:
/* Popup surfaces — these carry inline styles, so use !important */
.smartrecom-sizechart-header,
.smartrecom-sizechart-body,
.smartrecom-modal-content {
background: #1a1a2e !important;
}/* Sticky table column and cell text — variables, no !important needed */
.smartrecom-sizechart {
--smartrecom-table-sticky-bg: #1a1a2e;
--smartrecom-table-text-color: #f0f0f0;
--smartrecom-table-empty-color: #6a6a7a;
}/* Header row color comes from the size chart editor settings (inline),
so override it here if it should change too */
.smartrecom-table-header {
background: #16213e !important;
color: #f0f0f0 !important;
}
Dark mode support
@media (prefers-color-scheme: dark) {
.smartrecom-quiz-manager {
background-color: #1a1a1a;
color: #ffffff;
} .smartrecom-card {
background-color: #2d2d2d;
border: 1px solid #404040;
} .smartrecom-multiple-choice-option {
background-color: #2d2d2d;
border-color: #404040;
color: #ffffff;
} .smartrecom-card-input {
background-color: transparent;
border-bottom-color: #404040;
color: #ffffff;
}
}
Custom spacing
/* Increase overall spacing */
.smartrecom-quiz-manager {
padding: 40px 24px;
}.smartrecom-measurements-title {
margin-bottom: 60px;
}.smartrecom-multiple-choice-options {
gap: 20px;
}
Customization boundaries
What you can safely override
Colors (backgrounds, borders, text)
Typography (font-family, font-size, line-height)
Spacing (padding, margin, gap)
Sizing (width, height, max-width)
Decorative properties (border-radius, box-shadow)
What you should not override
Layout algorithms (flex, grid properties that control internal structure)
Positioning (absolute, fixed, z-index on critical overlays)
Transform and animation keyframes
Pointer and touch event handling
Tips
Use
!importantcarefully — Only use it when necessary to override existing SmartSize styles.Test on mobile — Always test your customizations on actual mobile devices, not just browser resizing.
Brand consistency — Keep your customizations consistent with your store's design.
Accessibility — Ensure sufficient color contrast for text readability.
Performance — Avoid overly complex CSS selectors that might slow down rendering.
Troubleshooting
Styles not applying
Add your CSS in the right place. Because the popups use Shadow DOM, CSS in your theme stylesheet or in a page
<style>tag won't reach them. Put your rules in Settings → Global settings → Custom CSS instead.Confirm you're targeting an existing class — open the popup, inspect the element, and check the class name starts with
smartrecom-.Try adding
!importantto the declaration; some widget styles use it and need to be overridden the same way.After saving Custom CSS, reload the storefront product page to pick up the change.
Main button not showing after update
If you upgraded from an older version and your main trigger button isn't visible:
Check if you're targeting
.smartrecom-button— this class is now used for internal quiz buttons only.Update your CSS to use
.smartrecom-main-buttonfor the storefront trigger button.
Mobile issues
Test on actual mobile devices, not just browser resize.
Ensure touch-friendly button sizes (minimum 44px).
Check text readability on small screens.
Related articles