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.
Install Review Box
Customize Review Box
- Component visibility
- Style & appearance
🟢 Heads-up: Before customizing the widget, you need to enable Kudosi Core Snippet
From the dashboard, select “Show reviews”.
Locate the Review Box widget and click “Install”.
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.
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 article
Read more about manually adding the Review Box by copying code for theme 1.0 and special product templates.
Steps to navigate to Review Box customization:
Navigate to the Show reviews section in the dashboard.
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”.
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:
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
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
On this page
Install Review Box
Customize Review Box
- Component visibility
- Style & appearance
🟢 Heads-up: Before customizing the widget, you need to enable Kudosi Core Snippet
Install Review Box
Steps to install:
From the dashboard, select “Show reviews”.
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 article
Read 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:
Navigate to the Show reviews section in the dashboard.
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. | |
| Show published date | Displays the date the review was posted. | |
| 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: 19/03/2025
Thank you!