# Review box

### **1. Setting up Review box in themes editor**

Head to "**Display reviews**" section on the left side menu.

Locate "**Review box**" feature, and click on "**Setup**" to start the process.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FMj7I80cdZdJ9q2McZ7ax%2Fimage.png?alt=media&#x26;token=51f01c8d-a856-4a15-a73d-0db4bc6a2b58" alt=""><figcaption></figcaption></figure>

In "**Choose positions**" panel, click "**Go to theme**" to decide where to show your review box.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FnJYKa64llBjIaEXIQQnM%2Fimage.png?alt=media&#x26;token=5ce947b9-0cc3-47d5-9132-9d423c0b32fe" alt=""><figcaption></figcaption></figure>

#### **1.1 Position the Review Box**

* Click on "**App Embeds**" on the left side menu.
* Locate **Air Reviews app**. Toggle the button on to use Air Reviews app.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FYafrtyrr1749VCvuH2se%2Fimage.png?alt=media&#x26;token=aa764484-0f92-4ec5-84e3-b30dba31ed21" alt=""><figcaption></figcaption></figure>

* Click '**Add block**', then find the "**Review Box**" by Air Product Reviews and click on it.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FkFcrRnmcV7hUZ6hi9rw3%2Fimage.png?alt=media&#x26;token=ac780bdd-756e-4898-9e8c-42f54df64813" alt=""><figcaption></figcaption></figure>

#### **1.2 Customize Appearance**

* Adjust the review layout and display colors as desired.
* Preview the changes in the theme editor and click "**Save**" the changes.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FcHALYNKsG1fJ0csKgFd5%2Fimage.png?alt=media&#x26;token=6ae3d957-7f25-4e81-92f6-ae087f3f2af3" alt=""><figcaption></figcaption></figure>

### 2. Configuration Details

#### **2.1 Layout**

Choose how reviews are arranged in the box. Three options are available for both desktop and mobile:

* **List** — reviews stacked vertically, one per row.
* **Grid** — reviews in a multi-column grid.
* **Carousel** — reviews displayed as a slideshow with navigation arrows.

<figure><img src="/files/CpPeh9AzXwS896Reqw6b" alt=""><figcaption></figcaption></figure>

#### **2.2 Box content**

* **Review by variant**: Tick to show the variant on each review card and see the preview.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FFLtsHv4wmv8CQU7PAgVZ%2Fimage.png?alt=media&#x26;token=8504aba4-ae80-41af-b21a-d72e673f4e30" alt=""><figcaption></figcaption></figure>

> Heading text and date format are now configured globally on the **Branding** page instead of per-widget here.

#### **2.3 Color setup**

Pick the **Text color** used for review content inside the review box. Default is `#303030`.

#### **2.4 Advanced Settings**

Open **Advanced settings** to fine-tune how the review box behaves.

* **Sorting default**: choose the default sorting rule applied when shoppers open the review box. Options: **Recent**, **Highest**, **Lowest**, **Review with media**. The default is **Recent**.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FGgO2kzzuWJxCzL3gwqSL%2Fimage.png?alt=media&#x26;token=c6146bb3-5a34-470f-b1e8-eaf61389b6d3" alt=""><figcaption></figcaption></figure>

* **Hide review summary when there is no review yet**: tick to hide the summary block until the product has at least one review.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FFJmJkjJPG9Ht2cjNaQJI%2Fimage.png?alt=media&#x26;token=3e6fe86e-9b52-4bd6-89db-3f05572f4381" alt=""><figcaption></figcaption></figure>

* **Snippet code** — see section 2.5 below.
* **Custom CSS**: add your own CSS to fine-tune the appearance of the review box.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FNkbQAMNmzIt2EciHq3ZM%2Fimage.png?alt=media&#x26;token=b7d11857-cafc-4185-87b5-668110216eb7" alt=""><figcaption></figcaption></figure>

#### 2.5 Snippet code

The **Snippet code** field (inside **Advanced settings**) lets you insert the review box anywhere on the product page. Here's how:

* Copy the **Snippet code**.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FRbgEpVsTvanKKLE4Y4Ej%2Fimage.png?alt=media&#x26;token=518996e1-c33a-4d41-9764-6b121cd463cc" alt=""><figcaption></figcaption></figure>

* Go to '**Theme**', click on '**Actions**', and then '**Edit code**'.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FNEyslHXnwYuV8a1Ueao3%2Fimage.png?alt=media&#x26;token=f93906bb-922b-4bd0-b1fc-1d3d33e2b53f" alt=""><figcaption></figcaption></figure>

* Insert the copied code into '**main-product.liquid**' or '**product-template.liquid**' at your desired location.
* **Save** your changes and view the review box on your storefront to ensure it displays correctly.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FpCkGS0OdKqOA3y71oDSv%2Fimage.png?alt=media&#x26;token=0c046d1a-cc83-465d-8770-7dfd3524d0d2" alt=""><figcaption></figcaption></figure>

* Have a look at your result in your store.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FIyXAJwL48UasvuotTbPh%2Fimage.png?alt=media&#x26;token=f6abf62f-f066-4f93-bf7a-c53979dc554a" alt=""><figcaption></figcaption></figure>

*This guide provides a straightforward approach to configuring your review display, making it easier for you to enhance the user experience on your Shopify site.*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.airreviews.io/display-reviews/review-box.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.