Displaying 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 display the Review Box on the desired page and customize the widget's appearance to best suit your store's brand.
Display Review Box
Display on the Product page
Display on any page
Customize Review Box
Heads-up: Before customizing the widget, you need to enable Kudosi Core Snippet.
There are 2 ways to add the Review on the Product page:
1. Add Review Box on the Onboarding Process
Steps:
On the Dashboard page, click Add Review Box in step 2. This will open the theme editor.
Click Save in the theme editor then the Review Box will be automatically added to the product page.
Tip: Read this article to know more about adding the Review Box during the onboarding process.
2. Auto-add Review Box on the Product Page
Steps:
In the Show Reviews section, click Customize in the Review Box.
Click Install widget > Reposition.
Once you click Reposition in the install widget section, the Review Box will automatically be added to the product page.
On the left side, you can drag and drop the widget to the position you want.
There are 2 ways to display the Review Box on the page you want:
1. Add app block
This is a common and easy way to display a widget on any page you want.
Steps:
From the Shopify Sales channels > Online store > Customize in the current theme section. This will open the theme editor.
In the theme editor, select one page: Homepage, Product page, or Collection page.
On the left sidebar, click Add block > Apps > search “review box” > select Review Box.
Tip: Read this article to know more about adding the review box via app block.
2. Manually install widget via code
In some cases, the review box may not be shown on your online store due to using a special theme, special product templates, or technical problems. In these cases, you may need to add the review box widget manually via coding.
Steps:
On the Review Box page, click Install widget > Add widgets manually.
Copy the code in the install widget section.
Paste the code on specific pages that you want to show in the theme editor.
Tip: Read more about manually adding the Review Box by copying code.
Heads up: To let the widget appear on your storefront, remember to toggle it on the top right corner of each widget settings page.
There are 3 widget layouts for you to select depending on your store brand style.
Grid
List
Slider
Configuring these settings allows you to control the visibility and organization of various sections in customer reviews, making it easier for users to interact, view media, and find information quickly.
Check the boxes in the sections where you want them to appear in the online store.
Besides some notes you may need to know:
To show the button “Ask a question” 2 boxes need to be checked: “Show button Write a review” and “Show Q&A section”.
To show the Q&A section 2 boxes need to be checked: “Show Q&A section” and “Show tabs”.
Configuring widget content allows you to tailor the text and labels in your review widgets to match your store's branding and language preferences, enhancing clarity and user experience.
Steps:
Click Customize text in the widget content section.
Select a language:
Select one language to configure your store. The 3 available languages are English, Portuguese, and Chinese (simplified).
Configure widget content
Customize the following sections of the widgets:
In general, you can modify all the text in the customer reviews section. Default text is provided, but you can change it following the language you selected.
Note: Click the "Reset Default" button next to the language selection to revert all text to the Kudosi default for the selected language.
Click Configure in the advanced settings, then adjust the following settings as needed:
The overall section allows you to define colors, fonts, sorting logic, search box, and other settings, ensuring the Review Box matches your store's branding and making it easier for customers to find and evaluate reviews.
Tip: Read more about configuring and sorting the reviews.
Configuring the rating icon settings allows you to customize the appearance of rating icons, enhancing visual appeal and ensuring consistency with your store's design.
Configuring the call to action settings allows you to customize the appearance of call-to-action buttons, enhancing their visibility and encouraging customer interactions.
Configuring the review item settings allows you to personalize each review card's appearance and content, making it easier for customers to understand and trust the reviews.
The Questions & Answers section allows customers to quickly find relevant information, ask questions, and see answers, enhancing their understanding and trust in the product.
Configuring the interaction settings enhances user engagement by allowing customers to easily write reviews or ask questions through clearly defined sections or modals.
The summary section helps customers quickly assess the quality of a product by highlighting the average rating, review title, and rating distribution at the top of the Review Box.
You can edit CSS in the custom CSS section.
Note:
1. After configuring settings, remember to click "Save" to apply the changes.
2. Click the eye icon to preview how the changes look on your storefront.
3. To undo all changes and return to the Kudosi default, click "Reset default". Check the box for which elements you want to reset to default: Appearance widget content for all languages.
If you need more help, please feel free to contact us via live chat or email us at support@fireapps.io.
Related articles:
Displaying and customizing Review Badge
Displaying and customizing Carousel
Displaying and customizing Review Popup
On this page
Display Review Box
Display on the Product page
Display on any page
Customize Review Box
Heads-up: Before customizing the widget, you need to enable Kudosi Core Snippet.
Display Review Box
Display Review Box on the product page
There are 2 ways to add the Review on the Product page:
1. Add Review Box on the Onboarding Process
Steps:
On the Dashboard page, click Add Review Box in step 2. This will open the theme editor.
Click Save in the theme editor then the Review Box will be automatically added to the product page.
Tip: Read this article to know more about adding the Review Box during the onboarding process.
2. Auto-add Review Box on the Product Page
Steps:
In the Show Reviews section, click Customize in the Review Box.
Click Install widget > Reposition.
Once you click Reposition in the install widget section, the Review Box will automatically be added to the product page.
On the left side, you can drag and drop the widget to the position you want.
Display Review Box on any page
There are 2 ways to display the Review Box on the page you want:
1. Add app block
This is a common and easy way to display a widget on any page you want.
Steps:
From the Shopify Sales channels > Online store > Customize in the current theme section. This will open the theme editor.
In the theme editor, select one page: Homepage, Product page, or Collection page.
On the left sidebar, click Add block > Apps > search “review box” > select Review Box.
Tip: Read this article to know more about adding the review box via app block.
2. Manually install widget via code
In some cases, the review box may not be shown on your online store due to using a special theme, special product templates, or technical problems. In these cases, you may need to add the review box widget manually via coding.
Steps:
On the Review Box page, click Install widget > Add widgets manually.
Copy the code in the install widget section.
Paste the code on specific pages that you want to show in the theme editor.
Tip: Read more about manually adding the Review Box by copying code.
Customization options
Heads up: To let the widget appear on your storefront, remember to toggle it on the top right corner of each widget settings page.
Select widget layout
There are 3 widget layouts for you to select depending on your store brand style.
Grid
List
Slider
Configure settings
Configuring these settings allows you to control the visibility and organization of various sections in customer reviews, making it easier for users to interact, view media, and find information quickly.
| Settings | Description |
|---|---|
| Summary reaction | The average rating, total number of reviews, and a bar graph showing the distribution of ratings from 1 to 5 stars. |
| Media section | Photos and videos uploaded by customers with their reviews. |
| Button “Write a review” | Customers submit a new review. |
| Button “Ask a question” | Customers ask questions about the product. |
| Q&A section | Questions from customers and answers from other customers or the store. |
| Show tabs | Separate tabs to switch between reviews and questions. |
| Reviews per loading | The number of reviews displayed at a time before loading more. |
Check the boxes in the sections where you want them to appear in the online store.
Besides some notes you may need to know:
To show the button “Ask a question” 2 boxes need to be checked: “Show button Write a review” and “Show Q&A section”.
To show the Q&A section 2 boxes need to be checked: “Show Q&A section” and “Show tabs”.
Customize Widget Content
Configuring widget content allows you to tailor the text and labels in your review widgets to match your store's branding and language preferences, enhancing clarity and user experience.
Steps:
Click Customize text in the widget content section.
Select a language:
Select one language to configure your store. The 3 available languages are English, Portuguese, and Chinese (simplified).
Configure widget content
Customize the following sections of the widgets:
| Settings | Description |
|---|---|
| Summary section | The text for headings, review counts, “all media”, and prompts when there are no reviews. |
| Filter/Sorting | The text for filter options, sorting methods, and search placeholders. |
| Write a review | The text for the review submission form “Write a review” including labels, prompts, and error messages. |
| Ask a question | The text for the question submission form “Ask a question” including labels, prompts, and error messages. |
| List reviews | The text for displaying reviews includes labels for verified purchase, ratings, helpfulness, and more. |
| List questions | The text for displaying questions includes labels for helpfulness, viewing more, and loading more questions. |
In general, you can modify all the text in the customer reviews section. Default text is provided, but you can change it following the language you selected.
Note: Click the "Reset Default" button next to the language selection to revert all text to the Kudosi default for the selected language.
Configure advanced settings
Click Configure in the advanced settings, then adjust the following settings as needed:
Overall section
The overall section allows you to define colors, fonts, sorting logic, search box, and other settings, ensuring the Review Box matches your store's branding and making it easier for customers to find and evaluate reviews.
| Settings | Description |
|---|---|
| Section background | The background color of the Review Box widget on the product page. |
| Primary text color | Used for the main heading "Customer Reviews", the average rating score, the tab names, the rating distribution graph bars, reviewer names, review text, and the text in the search and sorting options. |
| Secondary text color | Used for the review count next to the average rating, the number of reviews in the rating distribution graph, the date of each review, and the "See more" links within individual reviews. |
| Heading text font size | The default text font size for "Customer Reviews" is 26 pixels. |
| Border radius | The roundness of the corners of the Review Box. |
| Body text font size | The font size for the main text in reviews. |
| Accessory text font size | The font size for: the review count next to the average rating, “verify purchase”, and the date of each review. |
| Margin top/Margin bottom | The vertical space between the Review Box and other elements on the page. |
| Font family | “Inherit from theme" means using your website’s default font. Other available options include Inter, Poppins, and Playfair. |
| Hide for products without reviews | Checking this box will not show products that have no reviews. |
| Show reviews search box | Checking the box to show a review search. |
| Show reviews sorting | Configuring the default order in which customers see reviews and providing sorting options for them. |
Tip: Read more about configuring and sorting the reviews.
Rating icon
Configuring the rating icon settings allows you to customize the appearance of rating icons, enhancing visual appeal and ensuring consistency with your store's design.
| Settings | Description |
|---|---|
| Rating icon shape | The shape of the rating icons (e.g., Default, Thin, Rounded, Circle, Heart). |
| Rating icons spacing | The distance between each rating icon measured in pixels. |
| Rating icon filled color | The color code for filled rating icons. |
| Rating icon empty color | The color code for empty rating icons. |
| Show rating icon border | The border around rating icons. |
| Rating icon size | The size of the rating icons measured in pixels. |
Call to actions
Configuring the call to action settings allows you to customize the appearance of call-to-action buttons, enhancing their visibility and encouraging customer interactions.
| Settings | Description |
|---|---|
| Button background | Applied for the button background “Write a review”. |
| Button text color | Applied for the button text color “Write a review”. |
| Links color | Applied for the text color “Load more”. |
| Button outline color | Applied for the button outline color “Load more”. |
Review item
Configuring the review item settings allows you to personalize each review card's appearance and content, making it easier for customers to understand and trust the reviews.
| Settings | Description |
|---|---|
| Card background color | The background color of the review card. Options include Basic, Light, Dark, and No shadow. |
| Card border (color) | The border visibility and the border color of the review card. |
| Card shadow | The shadow effect around the review card. |
| Show review media | Media (images/videos) included in the review. |
| Show review star | The star rating in each review card. |
| Customer avatar | The avatar of the customer. Options include Auto, Pastel, Black & White, and No avatar. |
| Customer name format | The format for displaying the customer's name. Options include John Doe, J.D, John D, and J*******. |
| Show reviewer country flag | The flag of the reviewer's country. |
| Show verified badge (color) | A badge indicating the reviewer is verified and sets color for “Verified purchase”. |
| Show reaction icon | Icons “like” and “dislike” represent reactions to the review. |
| Show positive reactions only | Filtering and showing only positive reactions to the review. |
| Show published date | The date when the review was published. |
| Date format | The format for displaying the published date. |
Questions & Answers
The Questions & Answers section allows customers to quickly find relevant information, ask questions, and see answers, enhancing their understanding and trust in the product.
| Settings | Description |
|---|---|
| Show reaction icon | Icons for reactions in the questions and answers section. |
| Customer name format | The format for displaying customer names. Options include John Doe, J.D, John D, and J*******. |
| Show reviewer country flag | The flag of the reviewer's country. |
| Show positive reactions only | Filtering and showing only positive reactions. |
| Show published date | The date when the question or answer was published. |
| Date format | The format for displaying the published date. |
| Show questions sorting | Enabling/disabling sorting of questions |
| Default questions sorting (newest oldest) | Setting the default order for sorting questions. Options include newest first and oldest first. |
| Show questions search box | A search box for finding specific questions. |
Interaction
Configuring the interaction settings enhances user engagement by allowing customers to easily write reviews or ask questions through clearly defined sections or modals.
| Settings | Description |
|---|---|
| “Write a review” mode | Configuring the display section for users to write a review. Options include a new section and an open modal. |
| “Ask a question” mode | Configuring the display section for users to ask a question. Options include a new section and an open modal. |
Summary section
The summary section helps customers quickly assess the quality of a product by highlighting the average rating, review title, and rating distribution at the top of the Review Box.
| Settings | Description |
|---|---|
| Show title | Displays the title of the review section “Customer Reviews” |
| Show average rating | The average rating based on user reviews. |
| Show rating distribution | Displaying the number of reviews for each star rating and visually representing the proportion of each rating with horizontal bars. |
You can edit CSS in the custom CSS section.
Note:
1. After configuring settings, remember to click "Save" to apply the changes.
2. Click the eye icon to preview how the changes look on your storefront.
3. To undo all changes and return to the Kudosi default, click "Reset default". Check the box for which elements you want to reset to default: Appearance widget content for all languages.
If you need more help, please feel free to contact us via live chat or email us at support@fireapps.io.
Related articles:
Displaying and customizing Review Badge
Displaying and customizing Carousel
Displaying and customizing Review Popup
Updated on: 24/07/2024
Thank you!