> For the complete documentation index, see [llms.txt](https://docs.roadmap.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roadmap.so/reviews/storefront-and-display/customise-review-widget-design.md).

# Customise review widget design

How the review widget editor works: the three widgets it covers, the preview, shared styling and saving.

One editor covers every review surface on your storefront. This page explains how the editor itself works and what each widget is for. Each widget then has its own guide.

{% hint style="info" %}
Want your review widgets to match the rest of your Roadmap blocks in one action? The [Universal Styler](/getting-started/how-the-universal-styler-works.md) applies your brand colours, border radius and typography across every Roadmap block at once. Use these guides for the review-specific settings on top of that base.
{% endhint %}

### The editor at a glance

In Roadmap, open the **Reviews** dashboard and select the **Review Form** tab. The editor opens as a modal and is built from three parts:

* **Settings columns** on the left and right, which collapse with the chevron on their edge to give the preview more room.
* **The preview** in the middle, rendered with sample data.
* **The top bar**, which switches to **Unsaved changes** with **Discard** and **Save** as soon as you change anything.

Above the preview:

* **The widget dropdown**, top left, switches between **Review Badge**, **PDP Block** and **Review Form**.
* **Product Reviews** and **Store Reviews** tabs sit in the centre. Each is configured separately.
* **Desktop and mobile toggles**, top right, preview each breakpoint.

{% hint style="warning" %}
The preview uses sample data and does not inherit your theme's fonts and spacing. Treat it as a guide to your settings rather than a pixel-accurate render, and check the real thing on your storefront once you have saved.
{% endhint %}

### The three widgets

| Widget           | What it is                                                               | Guide                                                                                       |
| ---------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
| **Review Badge** | The compact star rating and review count for product cards and listings. | [Edit your review badge](/reviews/storefront-and-display/edit-your-review-badge.md)         |
| **PDP Block**    | The reviews section on your product page, including questions.           | [Edit your PDP review block](/reviews/storefront-and-display/edit-your-pdp-review-block.md) |
| **Review Form**  | The form shoppers fill in to leave a review.                             | [Edit your review form](/reviews/storefront-and-display/edit-your-review-form.md)           |

### Widget Stylings

Every widget has a **Widget Stylings** column holding its visual settings. The groups inside differ by widget, and each guide lists its own, but two things work the same way everywhere.

**Styler inheritance.** Settings marked **Styler** inherit from the [Universal Styler](/getting-started/how-the-universal-styler-works.md), so your widgets match the rest of your Roadmap blocks automatically. Change one and it shows an **Edited** badge, which tells you at a glance which values you have overridden and which are still inherited.

**Custom CSS.** The button in the Widget Stylings header opens direct access to each widget's CSS variables, for anything the editor does not expose.

### Saving

As soon as you change anything, the top bar switches to **Unsaved changes**. **Save** applies your changes and **Discard** throws them away.

Settings apply to the tab you are on, so confirm whether you are editing **Product Reviews** or **Store Reviews** before saving.

<details>

<summary>Why don't I see my changes on the storefront?</summary>

Check that you clicked **Save**, and that you were on the right tab. **Product Reviews** and **Store Reviews** are configured separately, so a change saved against one does not affect the other.

</details>

### Related guides

* [Edit your review badge](/reviews/storefront-and-display/edit-your-review-badge.md)
* [Edit your PDP review block](/reviews/storefront-and-display/edit-your-pdp-review-block.md)
* [Edit your review form](/reviews/storefront-and-display/edit-your-review-form.md)
* [Add reviews to product pages](/reviews/storefront-and-display/add-reviews-to-product-pages.md)
* [How the Universal Styler works](/getting-started/how-the-universal-styler-works.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.roadmap.so/reviews/storefront-and-display/customise-review-widget-design.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.