> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.alireviews.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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

* [Install Review Box](#2-install-review-box)
* [Customize Review Box](#2-customization-review-box)
* [Component visibility](#3-1-component-visibility)
* [Style & appearance](#3-2-style-amp-appearance)

||| 🟢 Heads-up: Before customizing the widget, you need to [enable Ali Reviews Core Snippet](https://help.alireviews.io/en/article/enabling-ali-reviews-core-snippet-1jfwm5a/)

## Install Review Box

### Steps to install:

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

![](https://storage.crisp.chat/users/helpdesk/website/51849c8de000cc00/1-install_1mjt0aw.jpg)

### 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.

![](https://storage.crisp.chat/users/helpdesk/website/51849c8de000cc00/2-2-option-install_1vyk9qf.jpg)

| Tip: If you want to add the Review Box via **app block**, [read this article](/en/article/adding-the-review-box-via-app-block-zw1k8o/)
| Read more about [manually adding the Review Box by copying code](/en/article/manually-adding-the-review-box-by-copying-code-nkxdm1/) 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.

![](https://storage.crisp.chat/users/helpdesk/website/51849c8de000cc00/3-customize_16b8g7u.jpg)
**Review Box Toggle:** Enable / Disable this option will show / hide the widget on your store 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.

![](https://storage.crisp.chat/users/helpdesk/website/51849c8de000cc00/4visibility_uumt86.jpg)

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

![](https://storage.crisp.chat/users/helpdesk/website/51849c8de000cc00/5-all-elements_u6y7w6.jpg)

### 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.

![](https://storage.crisp.chat/users/helpdesk/website/51849c8de000cc00/6-style-appearance_1ipoe7e.jpg)

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** |  |  |

![](https://storage.crisp.chat/users/helpdesk/website/51849c8de000cc00/7-config-style_146mcfy.jpg)

## 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 **Ali Reviews default**, click **Reset to default**. Check the box for which elements you want to reset to default: **Appearance, widget content for all languages**

![](https://storage.crisp.chat/users/helpdesk/website/51849c8de000cc00/12-save-and-reset-default_1xqjm3r.jpg)
**
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@alireviews.io

**