Customising
MarkdownThe ways to change how the review section looks, from the default component to headless use.
There are four ways to make the review section look like part of your site. Each builds on the one before, and you can stop at the level you need. None of them removes the elements the regulations require; for details, see Required elements.
| Method | What can be changed | Work required |
|---|---|---|
| 1. Default component | No additional setting is needed. One of eight built-in designs (Warm, Trust, Editorial, Minimal, Blush, Sport, Natural, Night) and one of two layouts (Cards, Side panel) are chosen per channel in the panel. It uses your page’s typeface. | None |
| 2. CSS variables | Colours, typeface, corner radius, spacing, star colour, line width | A few lines of CSS |
| 3. Layout and CSS selectors | The built-in design and layout per container, list or grid arrangement, the position of the review writing area; the look, order and spacing of every element | Your site’s CSS file |
| 4. Headless use | The summary, list, review cards and filters are built entirely with your own components | Development |
Choosing a method
Section titled “Choosing a method”- If you want to choose one of the built-in designs and layouts: the Store appearance screen in the panel, Store appearance.
- If you only want to adapt the colours and typeface to your brand: CSS variables.
- If you want to change how the cards look, where elements are placed and the spacing: Layout and CSS selectors.
- If you want to build the review section with your design system’s components, or add your own filters or special displays such as a size scale: Headless use.
The methods can be combined. In headless use, the CSS variables still determine the look of the review form and the order verification dialog.
What cannot be changed
Section titled “What cannot be changed”- Interface texts are provided by Sayproof and are updated with the product in both languages; they cannot be changed in the default component. If you want to use different texts, build the list in headless mode; you are not required to use the
wordsfield of the response. - The review form is always displayed by Sayproof. Its look can be changed with CSS variables and CSS selectors; its fields and flow cannot. This ensures that verification, consent texts and file upload work under the same rules for every brand.
- The filters of the default component are fixed: star level, verified buyers, reviews with photos or video, frequently mentioned words and search. Rating topics (for example a size scale) are shown as scales in the summary and on the review card, but are not offered as filters. Other filters or displays require headless use.