All Collections
How do I customize the style of my reviews widgets?
How do I customize the style of my reviews widgets?
Updated over a week ago

Depending on what you're trying to accomplish, there are a few ways to customize the design and behavior or your widgets for our Reviews app (stars and reviews widgets).

Can't figure out how to do something in particular? Reach out to us and let us know what you want to do and we'll help you pull it off.

Monto is a super flexible tool, so if you want to do it, chances are we can make it happen using one of these three methods:

Customize Page

See our Customize Page by clicking here or log into Monto > Reviews > Customize.

This method is good for changing theme colors and small changes to functionality (hide review button, allow review photo uploads, etc...). This page also gives you access to toggle on/off functionality such as hiding certain elements, allow review photo uploads, hide/show "add review button", and limit the number of reviews that appear by default without pagination, among others.

Change Font & Styling (font color, padding, margins, etc.) of the Entire Reviews Widget

On the html embed itself from within webflow. You can apply styles to the embed element itself in the webflow designer to apply a style to the entire widget (usually used for fonts but also other widget-wide styles).

This is good for changing fonts, font colors, background colors and adding margin/padding around the widget.

Add custom CSS to Change Font & Styling of Specific Elements

To see our Custom CSS feature, Click here or log into Monto > Reviews > Customize > Widget > Appearance

You have complete CSS control using this method! The widget is your oyster.

This is good for changing a very specific thing in a monto widget such as hiding certain elements, changing spacing between rows, hiding entire sections of the widgets (by using display: none;), updating fonts for very specific text, etc....

To see your updates simply save and refresh the page. If you don't see your updates take place immediately try adding the !important to your CSS rule (docs)

Some quick CSS classes that you might want to style...

  • .monto-default-theme (reviews widget wrapper)

  • .star-widget (the inline rating beneath product title)

  • .star-rating (the review widget number rating + stars)

  • .rating-distribution (bar graph of reviews ratings)

  • .monto-review-list-item__customer-name (customer name)

  • .monto-review-list-item__message (customer review message)

  • .add-review-button ("Add Review" button)

Did this answer your question?