Articles on: Showing Reviews

Installing and customizing Review Box

The Review Box widget showcases customer reviews in grid, list, or slider layouts, enhancing your store's credibility. This guide will show you how to install the Review Box on the desired page and customize its appearance to best suit your store’s brand.


On this page



🟢 Heads-up: Before customizing the widget, you need to enable Kudosi Core Snippet


Install Review Box


Steps to install:


  1. From the dashboard, select “Show reviews”.
  2. Locate the Review Box widget and click “Install”.



Case 1: First-time installation


If you install this widget for the first time:


  • Click the “Add Review Box” button. This will open the theme editor where you can add the Review Box to the product page or homepage.
  • Choose the widget's position within the theme editor.
  • Save your changes on the Shopify theme to show the widget.


Case 2: Installing the Review Box on additional pages


If you have already installed the Review Box and want to add it to another page:


  • Select the desired theme and page.
  • Click “Add Review Box” to open the theme editor.
  • Save your changes on the Shopify theme to show the widget.



Tip: If you want to add the Review Box via app block, read this articleRead more about manually adding the Review Box by copying code for theme 1.0 and special product templates.


Customization Review Box


Steps to navigate to Review Box customization:


  1. Navigate to the Show reviews section in the dashboard.
  2. Click “Customize” on the Review Box widget.



🟢 Heads-up: to ensure the widget appears on your storefront, toggle it ON at the top right corner of the widget settings page.


In the customization, there are 2 main tabs: “Component visibility” and “Style & appearance”.


1. Component visibility


The component visibility settings allow you to show or hide specific components, such as the media section, search & filter section, and review items.


How to use the component visibility tab


  • Click on any element in the preview to quickly find it in the configuration panel.
  • Click the eye icon to toggle visibility for elements. When the eye icon is open, it indicates that the element is visible. When the eye icon is closed, the element is hidden from view.



You can configure the visibility of the following components:


Section

Widget elements

Description

Summary section

Show title

Displays the title of the summary section.

Show average rating

Shows the average rating based on user reviews.

Show rating distribution

Displays the breakdown of ratings (e.g., number of 5-star, 4-star reviews).

Show media section

Shows images or media attached to reviews.

Search & filter

Show tabs

Displays navigation tabs for different sections.

Show "Write a review" button

Enables the button for users to write a review.

Show "Ask a question" button

Enables a button for users to ask questions.

Show Q&A section

Displays the Questions & Answers section.

Show search box

Enables a search function for reviews or Q&A.

Show review sorting

Allows users to sort reviews based on criteria like sorting by date, rating, content, media.

Questions & answers

Show reaction icon

Displays an icon for users to react to answers.

Show positive reactions only

Limits visible reactions to only positive ones.

Show published date

Shows the date when a question was published.

Show question search box

Allows users to search for specific questions.

Show question sorting

click question tab, you see the question sorting options: Newest first or oldest first

Review item

Show review media

Displays media (images/videos) in user reviews.

Show review star

Shows the star rating given in reviews.

Show verified badge

Displays a "verified" badge for authenticated reviews.

Show reaction icon

Allows users to react to individual reviews.

Show positive reactions only

Restricts reactions to only positive ones.

Widget no reviews

Show widget when there are no reviews

Displays a placeholder message when there are no reviews.



2. Style & appearance


This is where you can adjust the layout, colors, and shapes to match your store’s branding and functionality.


How to use the style & appearance tab


  • Click on any element in the preview to locate its settings in the configuration panel.
  • Adjust button actions, sorting preferences, and other display settings in the left panel.



Widget component settings

Section

Setting

Description

Overall section

Widget layout

Selects the widget display style: Grid, List, or Slider.

Screen background

Adjusts the background color of the widget.

Columns on mobile

Defines how many columns are displayed on mobile.

Body text font size

Adjusts the main text size within the widget.

Accessory text font size

Adjusts the size of secondary text (e.g., labels, metadata).

Spacing from top margin

Sets the space between the top of the widget and surrounding elements.

Spacing from bottom margin

Sets the space between the bottom of the widget and surrounding elements.

Star rating

Note: This is one of the global settings. If you change it here, the star rating of the Review Box will be different from the other widget.

Use global settings for this widget

Toggles on the use of global rating settings.

Rating icon shape

Selects the shape of the rating stars/icons.

Rating icon spacing

Adjusts the spacing between rating icons.

Rating icon filled color

Changes the color of filled rating icons.

Rating icon empty color

Changes the color of empty rating icons.

Show rating icon border

Toggles the visibility of borders around rating icons.

Rating icon border color

Defines the color of the rating icon border.

Rating icon size

Adjusts the size of the rating icons.

Summary section

Heading text font size

Changes the font size of the summary heading.

Search & filter section

When clicking "Write a review"

Configures navigation behavior when users click the "Write a Review" button.

When clicking "Ask a question"

Configures navigation behavior when users click the "Ask a Question" button.

Default review sorting

Defines how reviews are sorted by default (e.g., newest to oldest).

Primary button background (Global setting)

Toggles on the use of global button styling or toggle off to change the background color of the primary button.

Primary button text (Global setting)

Toggles the use of global button styling or toggle off to change the text color of primary buttons.

Secondary button link text (Global setting)

Toggles the use of global button styling or toggle off to adjust the text color of secondary buttons.

Questions & answers

Default questions sorting

Sets the default order of questions (e.g., newest first).

Review item

Card background color

Adjusts the background color of review cards.

Card border

Toggles the visibility of card borders.

Card border color

Changes the color of the card borders.

Card shadow

Adds or removes shadows around review cards.

Verified badge color

Adjusts the color of the "Verified Purchase" badge.

Footer section

Load more button outline

Adjusts the border color of the "Load More" button.

Number of reviews per load

Defines how many reviews load at a time.

Widget content



Notes:


  • After configuring settings, remember to click Save to apply the changes.
  • Click the eye icon to preview how the changes look on your storefront.
  • To undo all changes and return to the Kudosi default, click Reset to default. Check the box for which elements you want to reset to default: Appearance, widget content for all languages


**
That's how to install and customize the Review Box. If you need more help, please feel free to contact us via live chat or email us at support@kudosi.ai


**

Updated on: 08/05/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!