Auto-Styling Your Reviews Widget

Quickly launch your reviews widget with auto-styling

Amanda Calderon avatar
Written by Amanda Calderon
Updated over a week ago

You can simplify the process of styling your reviews widget by providing only 3 colors:

  • Brand Color

  • Primary Text

  • Secondary Text Color

As demonstrated in the following example, Okendo automatically generates an entire palette of colors based on the 3 colors you provided and applies them across your review widget style settings. Keep in mind that these auto colors apply only to your reviews widget and not any other widget displays, such as the reviews carousel widget.

In this article, you'll learn how to:

Before you begin

Consider reviewing the Reviews Widget Style Glossary to understand how each style setting applies to a component or field across all display widgets.

Auto-style your reviews widget

  1. Open your Okendo app.

  2. Click Displays in the sidebar.

  3. Click the Reviews Widget option. The Reviews Widget page appears.

  4. Click the Style tab.

  5. Click the Auto Style button. The Auto Style tool appears.

  6. Pick the Brand, Primary Text, and Secondary Text colors by clicking the hex code field to expand the color picker. You can select a color from the color picker or enter a hex code in the field provided.

  7. Click Accept and Fill.

  8. Click Save Changes.

Change the star rating color

While auto-styling applies to all style settings across the reviews widget, it doesn't change the star rating color. Click here to learn how to change the star rating color.

Modify auto-generated colors

You can change the auto-generated colors at any time. Changing a color affects only the setting you changed and not the colors in the Auto Style tool. To change the Auto Style colors, you'll need to open the tool to pick new Brand, Primary Text, or Secondary Text colors.

  1. Navigate to a styling option.

  2. Click the hex code field to expand the color picker.

  3. Select a color from the color picker or enter a hex code in the field provided.

    Note: You can click outside of the color picker or press the Return or Enter key to close it.

  4. Click Save Changes.

Related articles

Did this answer your question?