Skip to content
SimplerSuite Reviews

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

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 */ }