Widget Customization

Dashboard Settings

The easiest way to customize the widget is through the SimplerSuite Reviews dashboard under Settings → Widget:

Primary Color — Used for buttons and interactive elements
Star Color — Color of the rating stars
Font Family — Set to inherit to match your theme
Layout — List, grid, or carousel view
Reviews Per Page — How many reviews to show per page
Show Photos — Toggle photo display
Auto-Approve — Skip moderation queue for new reviews
Enable Badge Ratings — Allow logged-in customers to submit a star rating directly from the rating badge near the product title
Require Verified Purchase for Badge Ratings — Only customers who have purchased the product can submit a rating from the badge

CSS Overrides

The widget uses CSS custom properties that you can override in your theme:

:root {
  --sr-primary: #000000;
  --sr-star: #FFB800;
  --sr-font: inherit;
  --sr-radius: 8px;
  --sr-bg: #ffffff;
  --sr-border: #e5e5e5;
  --sr-text: #333333;
  --sr-text-secondary: #666666;
}

Advanced CSS

All widget elements have data-sr-* attributes for targeted styling:

[data-sr-summary] { /* Summary section */ }
[data-sr-stars] { /* Star display */ }
[data-sr-distribution] { /* Rating bars */ }
[data-sr-review] { /* Individual review card */ }
[data-sr-form] { /* Submission form */ }
[data-sr-photos] { /* Photo grid */ }
[data-sr-badge] { /* Star rating badge */ }

Badge CSS Classes

The badge uses the following classes for targeted styling:

.sr-badge { /* Badge container (inline-flex) */ }
.sr-badge-count { /* "24 reviews" text */ }
.sr-badge-interactive { /* Badge with clickable stars */ }
.sr-badge-interactive .sr-star { /* Individual star buttons */ }
.sr-badge-tooltip { /* Tooltip shown for login/purchase prompts */ }