How do I customize the design of the review widget?

Introduction

Roadmap’s review widgets (on PDPs, collection pages, or the homepage) are designed to inherit your store’s theme styles automatically. This means fonts, colors, and buttons match your brand out of the box.

If you want more control, you can customize the design in the Roadmap admin — or apply custom CSS for advanced styling.

1. Default Styling (Inherits Theme)

By default, the review widget automatically picks up:

• Fonts & text styles from your theme.
• Colors for text, links, and buttons.
• Layout spacing consistent with your PDP or product card.

👉 Most merchants find this gives a clean, on-brand look without extra setup.

2. Customize in the Roadmap Admin

In Roadmap → Reviews → Settings, you can adjust:

• Star color (default yellow, but can be changed).
• Layout (list view, grid view, media-first for photo-heavy reviews).
• Filters (e.g., show only photo reviews or allow filtering by custom form fields).
• Badge style for review counts and star ratings.

3. Styling Collection Page Star Ratings (Widget Code)

If you’ve pasted the review widget code into your product cards:

• The stars inherit your theme’s default text and icon colors.
• You can override with custom CSS if you want a specific look (e.g., brand color stars, bold review counts).

👉 Example CSS snippet:

.roadmap-review-stars {
  color: #FF5A5F; /* Brand color for stars */
  font-size: 14px; /* Resize stars */
}
.roadmap-review-count {
  font-weight: bold;
  color: #333333;
}

4. Advanced Customization with CSS

For more granular control, you can:

• Adjust spacing and padding around review blocks.
• Change review form button styling.
• Restyle the Q&A module inside reviews.

👉 Roadmap’s support team can also provide CSS snippets if you’re not comfortable coding.

Why Customize?

• Brand consistency → Ensure review stars and text match your design system.
• Highlight social proof → Use bold colors or larger fonts for star ratings.
• Improve readability → Adjust layouts for photo-heavy reviews or mobile devices.

Common Questions

• Do I need a developer to style reviews?
  • Not usually — most changes can be done in the Roadmap admin. CSS is optional for advanced tweaks.
• Will the widget automatically match my store’s fonts/colors?
  • Yes — by default it inherits your theme styles.
• Can I style homepage review carousels differently from PDPs?
  • Yes — homepage blocks can be styled separately in the theme editor.
• Can I change star colors?
  • Yes — either in Roadmap admin settings or with CSS overrides.

Summary

The review widget automatically matches your store’s theme design. You can:

• Adjust star colors, layouts, and filters in the Roadmap admin.
• Customize collection page widgets with CSS overrides.
• Apply advanced styling via CSS or with help from the Roadmap team.

​