Articles on: Showing Reviews

Customizing and displaying 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.

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 Ali Reviews 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.

SettingsDescription
Summary reactionThe average rating, total number of reviews, and a bar graph showing the distribution of ratings from 1 to 5 stars.
Media sectionPhotos 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 sectionQuestions from customers and answers from other customers or the store.
Show tabsSeparate tabs to switch between reviews and questions.
Reviews per loadingThe 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:

SettingsDescription
Summary sectionThe text for headings, review counts, “all media”, and prompts when there are no reviews.
Filter/SortingThe text for filter options, sorting methods, and search placeholders.
Write a reviewThe text for the review submission form “Write a review” including labels, prompts, and error messages.
Ask a questionThe text for the question submission form “Ask a question” including labels, prompts, and error messages.
List reviewsThe text for displaying reviews includes labels for verified purchase, ratings, helpfulness, and more.
List questionsThe 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 Ali Review 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.

SettingsDescription
Section backgroundThe background color of the Review Box widget on the product page.
Primary text colorUsed 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 colorUsed 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 sizeThe default text font size for "Customer Reviews" is 26 pixels.
Border radiusThe roundness of the corners of the Review Box.
Body text font sizeThe font size for the main text in reviews.
Accessory text font sizeThe font size for: the review count next to the average rating, “verify purchase”, and the date of each review.
Margin top/Margin bottomThe 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 reviewsChecking this box will not show products that have no reviews.
Show reviews search boxChecking the box to show a review search.
Show reviews sortingConfiguring 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.

SettingsDescription
Rating icon shapeThe shape of the rating icons (e.g., Default, Thin, Rounded, Circle, Heart).
Rating icons spacingThe distance between each rating icon measured in pixels.
Rating icon filled colorThe color code for filled rating icons.
Rating icon empty colorThe color code for empty rating icons.
Show rating icon borderThe border around rating icons.
Rating icon sizeThe 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.

SettingsDescription
Button backgroundApplied for the button background “Write a review”.
Button text colorApplied for the button text color “Write a review”.
Links colorApplied for the text color “Load more”.
Button outline colorApplied 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.

SettingsDescription
Card background colorThe 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 shadowThe shadow effect around the review card.
Show review mediaMedia (images/videos) included in the review.
Show review starThe star rating in each review card.
Customer avatarThe avatar of the customer. Options include Auto, Pastel, Black & White, and No avatar.
Customer name formatThe format for displaying the customer's name. Options include John Doe, J.D, John D, and J*******.
Show reviewer country flagThe 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 iconIcons “like” and “dislike” represent reactions to the review.
Show positive reactions onlyFiltering and showing only positive reactions to the review.
Show published dateThe date when the review was published.
Date formatThe 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.

SettingsDescription
Show reaction iconIcons for reactions in the questions and answers section.
Customer name formatThe format for displaying customer names. Options include John Doe, J.D, John D, and J*******.
Show reviewer country flagThe flag of the reviewer's country.
Show positive reactions onlyFiltering and showing only positive reactions.
Show published dateThe date when the question or answer was published.
Date formatThe format for displaying the published date.
Show questions sortingEnabling/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 boxA 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.

SettingsDescription
“Write a review” modeConfiguring the display section for users to write a review. Options include a new section and an open modal.
“Ask a question” modeConfiguring 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.

SettingsDescription
Show titleDisplays the title of the review section “Customer Reviews”
Show average ratingThe average rating based on user reviews.
Show rating distributionDisplaying 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 Ali Review 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: 06/06/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!