# Review box

{% hint style="info" %}
**Who can use this feature?** 

This feature is available in **all plans**.
{% endhint %}

## **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 Heading, layout, and display colors as desired.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2F7gU5ck82Wfc1UI59gl7d%2Fimage.png?alt=media&#x26;token=4be773f4-e27d-46fc-bd50-644cfca7c8dd" alt=""><figcaption></figcaption></figure>

* 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 Design Styles**&#x20;

Choose between 'Simple' and 'Modern' styles for color customization options.

* **Simple** preset

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FkY6sLPtmoiJohXdVFyyN%2Fimage.png?alt=media&#x26;token=4eeebf78-5f28-4345-a497-01ae1e166193" alt=""><figcaption></figcaption></figure>

* **Modern** preset

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FrrvqCDZMxMboKQ6KyWDX%2Fimage.png?alt=media&#x26;token=496e563b-f8cb-4f48-a523-931275d49cad" alt=""><figcaption></figcaption></figure>

### **2.2 Layout Types**&#x20;

Opt for a "**List**" or "**Grid**" layout in both desktop and mobile modes.

* **List** layout

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FA2VrAnSccS9r80ZBM4ap%2Fimage.png?alt=media&#x26;token=7fa9e8e1-ef53-4414-9144-5f6f48682094" alt=""><figcaption></figcaption></figure>

* Check the preview in the Desktop mode.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FRKtM6gGVG7iXY9se7bFY%2Fimage.png?alt=media&#x26;token=d5110484-5393-4766-9985-b92395daf479" alt=""><figcaption></figcaption></figure>

* **Grid** layout

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2Fo1YqqaXU91hK1bhGDLg2%2Fimage.png?alt=media&#x26;token=c8698f23-3c8e-4a9f-af0a-96ba9f35ce2c" alt=""><figcaption></figcaption></figure>

* Check the preview in the Desktop mode

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2F35MxNTA0XrFYz4rhByhT%2Fimage.png?alt=media&#x26;token=acd38490-5cf1-451b-a7dd-72e2172f40cb" alt=""><figcaption></figcaption></figure>

### **2.3 Box Contents**

Customize headings, date formats, and review card variations.

* Enter an alternative **Heading** for the default one "Review" and see the preview.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FWt51o5ZJ74UYeLWzTtf5%2Fimage.png?alt=media&#x26;token=5399110e-4137-4147-ba0f-7594e26ca2b0" alt=""><figcaption></figcaption></figure>

* Select the **date format** of your choice and see the preview.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2FxAMrjEMGhnbz4gmn4RX5%2Fimage.png?alt=media&#x26;token=bd65196b-634e-4340-911a-3a9d75c11a2b" alt=""><figcaption></figcaption></figure>

* **Review by variant**: Tick to show variant in the review box 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>

### **2.4 Advanced Settings:**&#x20;

Set advanced **options** when showing review box.

* Hide review summary when there is no review yet.

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

* **Sorting default**: enable you to choose the default option for sorting rule in review box.&#x20;

The default sorting settings in Review box + All review block 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>

* **Show policy**: Tick to show. You can also edit your message.

<figure><img src="https://3743440187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVvJ89NUauGqmhX7UzkgE%2Fuploads%2Fm3jpB7uakfCsSPf05UkY%2Fimage.png?alt=media&#x26;token=ec81e0c4-f417-45e5-90d0-0600a8bcb9b1" alt=""><figcaption></figcaption></figure>

* You can also add your customized CSS to adjust the appearance.

<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

Snippet code enable you to insert the Review box into anywhere on product page, here's how you can do it yourself:

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