CSS customization reference¶

Guide type: Reference
Difficulty: Advanced
Applies to: SmartSize fit quiz popup, size chart popup

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:

1. Open Settings → Global settings → Custom CSS.
2. Paste your rules into the Custom CSS field.
3. 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¶

Step indicators and progress¶

Measurement step¶

Multiple choice steps¶

Bra size step¶

Size recommendation step¶

UI components¶

Modal (both popups)¶

Shared by the fit quiz popup and the size chart popup.

Size chart popup¶

The size chart popup renders the merchant-authored content blocks. These classes apply to the size chart, not the fit quiz.

Size chart content blocks¶

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:

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¶

1. Use !important carefully — Only use it when necessary to override existing SmartSize styles.
2. Test on mobile — Always test your customizations on actual mobile devices, not just browser resizing.
3. Brand consistency — Keep your customizations consistent with your store's design.
4. Accessibility — Ensure sufficient color contrast for text readability.
5. 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 !important to 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-button for 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¶

• Style your popups with custom CSS
• SmartSize app embeds for custom themes
• Styling resilience and conflict prevention
• JavaScript API overview