Opening the Toolbar
Click on any star rating element in the canvas. The toolbar appears above the stars with a smooth slide-in animation. It positions itself to stay within the viewport boundaries.The toolbar closes when you click outside of it or press the Escape key.
Star Style Options
The toolbar presents two star style options side by side, each with a visual preview:Regular Stars (Phosphor)
The Regular option uses Phosphor Icons’ filled star icons. These are simple, clean five-pointed stars rendered in the star color defined for the element.- Stars are rendered using the Phosphor
Staricon with thefillweight. - The star color is customizable per element (defaulting to gold/yellow
#F6BE00). - This style works well for generic review displays and custom-branded testimonials.
Trustpilot Stars
The Trustpilot option uses the official Trustpilot star rating graphic. This displays the recognizable green Trustpilot stars that consumers associate with verified reviews.- Uses the official Trustpilot 5-star SVG asset.
- Ideal when referencing Trustpilot reviews specifically.
- Provides instant visual credibility through brand recognition.
How to Switch Styles
Select a style
Click either the Regular or Trustpilot button. The currently active style has a highlighted border. The change applies immediately in the canvas.
Star Color
The star color for Regular (Phosphor) stars is configured per element in the section configuration. The default color is a warm gold (#F6BE00), which is the conventional color for star ratings across e-commerce.
Trustpilot stars use their official green color scheme and cannot be recolored, as they represent the Trustpilot brand.
Responsive Positioning
The toolbar uses smart positioning to prevent overflow:- It appears above the star element by default.
- If the stars are near the top of the screen, the toolbar shifts below them.
- Horizontal positioning is constrained to keep the toolbar fully visible within the viewport.
- The toolbar repositions dynamically if you scroll or resize the browser window.
Where Stars Appear
Star rating elements are available in several section types:Testimonial sections
Display customer review ratings alongside testimonial text.
Hero sections
Show aggregate ratings near headlines for social proof.
Product sections
Display product review scores near pricing and CTA buttons.
Stats sections
Highlight customer satisfaction metrics with visual star ratings.