Customize the visual appearance of your SmartSize AI Fit Recommender quiz widget using CSS. All elements in the widget have specific CSS classes that you can target to change colors, fonts, spacing, and other visual properties to match your brand.

Quick Start

To customize your quiz widget, add CSS rules to your Shopify theme.

You can add those rules on:

  • the theme’s Custom CSS field on Theme Settings (Recommended)
  • the theme’s stylesheet (e.g. file theme.css)
  • or in a <style> tag on your main theme file

All SmartSize AI Fit Recommender CSS classes start with smartrecom- to avoid conflicts with your existing styles.

Example: Changing the Primary Color 

  /* Change the accent color throughout the quiz */
.smartrecom-button-primary {
  background-color: #your-brand-color !important;
}

.smartrecom-multiple-choice-option.selected {
  border-color: #your-brand-color !important;
  background-color: #your-brand-color !important;
}

CSS Class Reference

Quiz Container & Navigation

.smartrecom-quiz-manager

Main quiz container - Controls overall quiz layout and spacing

  .smartrecom-quiz-manager {
  font-family: 'Your Brand Font', sans-serif;
  max-width: 600px;
}

.smartrecom-quiz-stepper

Step indicator at top of quiz - Progress dots showing current step

  .smartrecom-quiz-stepper {
  margin-bottom: 32px;
}

.smartrecom-quiz-product-title

Product title shown above quiz

  .smartrecom-quiz-product-title {
  font-size: 18px;
  color: #333;
  font-weight: 400;
}

Footer container with navigation

  .smartrecom-quiz-footer {
  border-top: 1px solid #eee;
  padding-top: 16px;
}

Step Indicators & Progress

.smartrecom-step-indicator

Container for progress dots

  .smartrecom-step-indicator {
  padding: 20px 0;
}

.smartrecom-step-indicator-dot

Individual progress dots

  .smartrecom-step-indicator-dot {
  width: 10px;
  height: 10px;
  background-color: #your-color;
}

.smartrecom-progress-bar-container

Progress bar container

  .smartrecom-progress-bar-container {
  height: 6px;
  background-color: #f0f0f0;
}

.smartrecom-progress-bar-fill

Progress bar fill

  .smartrecom-progress-bar-fill {
  background-color: #your-brand-color;
}

Measurements Step

.smartrecom-measurements-step

Main measurements step container

  .smartrecom-measurements-step {
  padding: 20px;
}

.smartrecom-measurements-title

“ENTER A FEW DETAILS BELOW” title

  .smartrecom-measurements-title {
  font-size: 28px;
  color: #222;
  text-align: center;
}

.smartrecom-measurements-subtitle

Step subtitle text

  .smartrecom-measurements-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}

.smartrecom-measurements-imperial-height

Imperial height input container (feet/inches)

  .smartrecom-measurements-imperial-height {
  gap: 16px;
}

.smartrecom-measurements-unit-label

Unit labels (feet, inches, etc.)

  .smartrecom-measurements-unit-label {
  font-size: 12px;
  color: #888;
}

Multiple Choice Steps

.smartrecom-multiple-choice-step

Main multiple choice container

  .smartrecom-multiple-choice-step {
  padding: 16px;
}

.smartrecom-multiple-choice-title

Step title

  .smartrecom-multiple-choice-title {
  font-size: 24px;
  margin-bottom: 40px;
  text-align: left;
}

.smartrecom-multiple-choice-options

Container for all options

  .smartrecom-multiple-choice-options {
  gap: 16px;
}

.smartrecom-multiple-choice-option

Individual option buttons

  .smartrecom-multiple-choice-option {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 20px;
  transition: all 0.2s ease;
}

.smartrecom-multiple-choice-option:hover {
  border-color: #your-brand-color;
  background-color: #f9f9f9;
}

.smartrecom-multiple-choice-option.selected

Selected option state

  .smartrecom-multiple-choice-option.selected {
  border-color: #your-brand-color;
  background-color: #your-brand-color;
  color: white;
}

.smartrecom-multiple-choice-image

Images in options

  .smartrecom-multiple-choice-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.smartrecom-multiple-choice-label

Option label text

  .smartrecom-multiple-choice-label {
  font-weight: 600;
  font-size: 16px;
}

.smartrecom-multiple-choice-description

Option description text

  .smartrecom-multiple-choice-description {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

Size Recommendation Step

.smartrecom-size-recommendation-step

Main results container

  .smartrecom-size-recommendation-step {
  text-align: center;
  padding: 40px 20px;
}

.smartrecom-size-recommendation-title

Results title

  .smartrecom-size-recommendation-title {
  font-size: 24px;
  margin-bottom: 16px;
}

.smartrecom-size-recommendation-size

Large size display

  .smartrecom-size-recommendation-size {
  font-size: 56px;
  font-weight: 700;
  color: #your-brand-color;
  margin: 40px 0;
}

.smartrecom-size-recommendation-message

Recommendation message

  .smartrecom-size-recommendation-message {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}

UI Components

.smartrecom-button

Base button styles

  .smartrecom-button {
  font-family: inherit;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.smartrecom-button-primary

Primary button styles

  .smartrecom-button-primary {
  background-color: #your-brand-color;
  color: white;
  border: none;
}

.smartrecom-button-primary:hover {
  opacity: 0.9;
}

.smartrecom-button-secondary

Secondary button styles

  .smartrecom-button-secondary {
  background: transparent;
  color: #666;
  border: none;
  text-decoration: underline;
}

.smartrecom-card

Input card container

  .smartrecom-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}

.smartrecom-card-input

Card input fields

  .smartrecom-card-input {
  border: none;
  border-bottom: 2px solid #e2e8f0;
  padding: 8px 0;
  font-size: 20px;
  font-weight: 500;
}

.smartrecom-card-input:focus {
  border-bottom-color: #your-brand-color;
  outline: none;
}

Common Customization Examples

Changing Brand Colors

Update all primary elements to match your brand:

  /* Primary brand color */
.smartrecom-button-primary,
.smartrecom-size-recommendation-size,
.smartrecom-card-input:focus,
.smartrecom-multiple-choice-option.selected {
  background-color: #your-brand-color !important;
  border-color: #your-brand-color !important;
}

/* Progress elements */
.smartrecom-progress-bar-fill,
.smartrecom-step-indicator-dot.active {
  background-color: #your-brand-color !important;
}

Custom Typography

Apply your brand fonts and typography hierarchy:

  /* Brand font family */
.smartrecom-quiz-manager {
  font-family: 'Your Brand Font', sans-serif;
}

/* Adjust title hierarchy */
.smartrecom-measurements-title,
.smartrecom-multiple-choice-title {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.5px;
}

/* Consistent text sizing */
.smartrecom-multiple-choice-label {
  font-size: 18px;
  font-weight: 500;
}

Mobile Responsiveness

Ensure optimal mobile experience:

  /* Mobile-first responsive design */
@media (max-width: 768px) {
  .smartrecom-quiz-manager {
    padding: 16px 12px;
  }
  
  .smartrecom-measurements-title {
    font-size: 24px;
  }
  
  .smartrecom-multiple-choice-option {
    padding: 16px;
    margin-bottom: 12px;
  }
  
  .smartrecom-size-recommendation-size {
    font-size: 48px;
  }
}

Dark Mode Support

Support dark mode preferences:

  /* Dark mode styles */
@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-multiple-choice-option:hover {
    background-color: #3d3d3d;
  }
}

Enhanced Visual Polish

Add sophisticated visual enhancements:

  /* Subtle animations */
.smartrecom-multiple-choice-option {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smartrecom-multiple-choice-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Enhanced focus states */
.smartrecom-card-input:focus {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
  transform: scale(1.02);
}

/* Refined spacing */
.smartrecom-quiz-manager {
  line-height: 1.6;
  letter-spacing: 0.025em;
}

Advanced Customization Techniques

CSS Custom Properties

Use CSS variables for consistent theming:

  :root {
  --smartrecom-primary-color: #your-brand-color;
  --smartrecom-secondary-color: #your-secondary-color;
  --smartrecom-border-radius: 8px;
  --smartrecom-spacing-unit: 16px;
}

.smartrecom-button-primary {
  background-color: var(--smartrecom-primary-color);
  border-radius: var(--smartrecom-border-radius);
}

.smartrecom-card {
  border-radius: var(--smartrecom-border-radius);
  padding: var(--smartrecom-spacing-unit);
}

Component-Specific Theming

Target specific quiz components:

  /* Gender selection step */
.smartrecom-multiple-choice-step[data-step="gender"] .smartrecom-multiple-choice-option {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

/* Measurements step */
.smartrecom-measurements-step .smartrecom-card {
  background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
  border: 1px solid #0284c7;
}

/* Results step */
.smartrecom-size-recommendation-step {
  background: radial-gradient(circle at top, #fef7cd, #ffffff);
}

Animation & Micro-Interactions

Add engaging micro-interactions:

  /* Loading animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.smartrecom-size-recommendation-loading {
  animation: pulse 2s infinite;
}

/* Button press feedback */
.smartrecom-button-primary:active {
  transform: scale(0.98);
}

/* Step transitions */
.smartrecom-quiz-step {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Implementation Best Practices

Performance Optimization

  • Minimize CSS Size - Only include styles you actually use
  • Use Efficient Selectors - Avoid overly complex CSS selectors
  • Leverage Browser Caching - Include CSS in external stylesheets when possible

Accessibility Considerations

  • Color Contrast - Ensure sufficient contrast ratios (WCAG 2.1 guidelines)
  • Focus Indicators - Maintain visible focus states for keyboard navigation
  • Touch Targets - Keep interactive elements at least 44px for mobile

Brand Consistency

  • Design System Alignment - Match your existing design system
  • Typography Hierarchy - Use consistent font weights and sizes
  • Color Palette - Limit color variations for cohesive appearance

Troubleshooting

Styles Not Applying

  1. Check CSS Specificity - Use browser developer tools to inspect conflicting styles
  2. Verify Loading Order - Ensure your custom CSS loads after the widget CSS
  3. Use !important Sparingly - Only when necessary to override existing styles

Mobile Compatibility Issues

  1. Test on Real Devices - Browser resize doesn’t always match mobile behavior
  2. Check Touch Interactions - Ensure buttons are appropriately sized for touch
  3. Validate Responsive Breakpoints - Test at various screen sizes

Browser Compatibility

  1. Use Autoprefixer - Automatically add vendor prefixes for CSS properties
  2. Test Cross-Browser - Validate in Chrome, Firefox, Safari, and Edge
  3. Provide Fallbacks - Include fallback values for newer CSS features

Performance Issues

  1. Optimize Images - Compress custom images used in styling
  2. Minimize CSS - Remove unused styles and minimize CSS files
  3. Avoid Complex Animations - Keep animations smooth and lightweight

Professional Styling Examples

Luxury Brand Aesthetic 

  .smartrecom-quiz-manager {
  font-family: 'Playfair Display', serif;
  color: #2d2d2d;
  background: linear-gradient(to bottom, #f8f8f8, #ffffff);
}

.smartrecom-button-primary {
  background: linear-gradient(45deg, #c9a961, #d4b76a);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.smartrecom-multiple-choice-option {
  border: 2px solid #e8e8e8;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

Modern Minimalist Style 

  .smartrecom-quiz-manager {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: #1f2937;
}

.smartrecom-button-primary {
  background: #000000;
  border-radius: 2px;
  font-weight: 500;
  text-transform: none;
}

.smartrecom-multiple-choice-option {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #ffffff;
  transition: border-color 0.2s ease;
}

Playful Brand Style 

  .smartrecom-quiz-manager {
  font-family: 'Nunito', sans-serif;
  color: #4a5568;
}

.smartrecom-button-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 25px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.smartrecom-multiple-choice-option {
  border: 3px solid #e2e8f0;
  border-radius: 15px;
  background: #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smartrecom-multiple-choice-option:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

CSS customization allows you to create a quiz experience that seamlessly integrates with your brand while maintaining optimal functionality and user experience. Start with basic color and typography changes, then gradually add more sophisticated styling as needed.