# Reviews Widget

## Overview

A high-impact, visually stunning review display widget that is proven to engage shoppers and increase conversions. Extensively customizable and optimized for page-load speed.

<figure><img src="https://317471629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKeDY1gVsPqUlb1dtZzTr%2Fuploads%2FEjvszqspXrabNNDvb2sh%2Freviews-widget.JPG?alt=media&#x26;token=feeba5db-c4fe-4a0e-8e02-160a9c34691d" alt=""><figcaption></figcaption></figure>

## Installation

{% tabs %}
{% tab title="Shopify Online Store 2.0" %}
Instructions for a Shopify Online Store 2.0 installation can be found [here](https://support.okendo.io/en/articles/5537298-installing-okendo-on-shopify-online-store-2-0).
{% endtab %}

{% tab title="Shopify Vintage Theme" %}

1. Create a new liquid snippet in the snippets folder with the following name: `snippets/okendo-reviews-widget.liquid`
2. Inside your newly created liquid file, add the following HTML snippet:

   ```tsx
   <div data-oke-widget></div>
   ```
3. Customize your snippet with the data attributes listed [here](#reviews-widget-data-attributes).
4. Copy the following snippet and place it in your Theme Code where you would like the widget to appear: `{% render 'okendo-reviews-widget', product: product %}`

For more detailed instructions, read our [help centre article](https://support.okendo.io/en/articles/1770332-setting-up-okendo-reviews-on-shopify-vintage-themes).
{% endtab %}
{% endtabs %}

## Styling

The preferred method of configuring the Reviews Widget is via the Okendo Admin which can be accessed in the Okendo app via Reviews -> On-Site Displays:

<figure><img src="https://317471629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKeDY1gVsPqUlb1dtZzTr%2Fuploads%2F5ebxcNc3mK4xVkHvt3ru%2Fon-site-displays-1.jpg?alt=media&#x26;token=22388cfc-7101-4bc5-875f-ed0baa58d660" alt=""><figcaption></figcaption></figure>

## Data Attributes

Use these data attributes on the widget markup to customize its configuration. None of these attributes are required.

<table><thead><tr><th width="220">Data Attribute</th><th width="206">Description</th><th width="119">Value Type</th><th>Supported Values</th></tr></thead><tbody><tr><td><code>data-oke-reviews-product-id</code></td><td>Used to specify a Shopify Product ID with the word <code>shopify-</code> in front of it. The reviews widget will only show reviews for the specified product.</td><td><code>string</code></td><td>Any valid product ID in the format <code>shopify-</code> e.g. <code>shopify-1234567</code>.</td></tr><tr><td><code>data-oke-reviews-group-id</code></td><td>Used to specify an Okendo Group ID so that the reviews widget only shows reviews for the specified group of products.</td><td><code>string</code></td><td>Any valid product group ID in a GUID format e.g. <code>69d2e67d-b980-4333-97b7-30411807a7b1</code></td></tr><tr><td><code>data-oke-reviews-ask-question-product-id</code></td><td>Used to show the “Ask a Question” in the reviews widget to leave a question for the specified product.</td><td><code>string</code></td><td>Any valid product ID in the format <code>shopify-</code> e.g. <code>shopify-1234567</code>.</td></tr><tr><td><code>data-oke-reviews-write-review-product-id</code></td><td>Used to show the “Write a Review” in the reviews widget to write a review for the specified product.</td><td><code>string</code></td><td>Any valid product ID in the format <code>shopify-</code> e.g. <code>shopify-1234567</code>.</td></tr></tbody></table>

## Examples

### **Giving The Widget A Data Source**

Without specifying a data source for the reviews, the widget will show **all** reviews for your store. You can provide either a Product ID or a Group ID to use that as the data source for the reviews.

#### **Product Widget**

```html
<div data-oke-widget data-oke-reviews-product-id="shopify-<PRODUCT_ID>"></div>
```

The product widget also has some pre-rendered content stored in Shopify Metafields that we recommend including for increased performance on-site:

If you are using **liquid** use the following snippet:

```
<div data-oke-widget data-oke-reviews-product-id="shopify-{{ product.id }}">
    {{ product.metafields.okendo.ReviewsWidgetSnippet }}
</div>
```

The general format for other frameworks is:

```html
<div data-oke-widget data-oke-reviews-product-id="shopify-<PRODUCT_ID>">
    <!-- 
    Retrieve the product.metafields.okendo.ReviewsWidgetSnippet via Shopify's GraphQL/REST API
    and put the contents here
    -->
</div>
```

#### Grouped **Widget**

Learn more about Okendo Groups here:

{% embed url="<https://support.okendo.io/en/articles/3086139-understanding-okendo-groups>" %}

If you are using **liquid or general frameworks** use the following snippet:

```
<div data-oke-widget data-oke-reviews-group-id="<GROUP_ID>"></div>
```

Group ID is found in the Okendo Admin URL for a given group as descibed in the table above.

### Specifying a Product To Ask About

When the widget is in all-reviews or grouped mode an explicit Product ID is needed to show the "Write a Review" or "Ask a Question" buttons.

#### Write A Review Product **ID**

If you are using **liquid** use the following snippet:

```markup
<div data-oke-widget data-oke-reviews-write-review-product-id="shopify-{{ product.id }}"></div>
```

The general format for other frameworks is:

```html
<div data-oke-widget data-oke-reviews-write-review-product-id="<PRODUCT_ID>"></div>
```

#### Ask A Question Product ID

If you are using **liquid** use the following snippet:

```markup
<div data-oke-widget data-oke-reviews-ask-question-product-id="shopify-{{ product.id }}"></div>
```

The general format for other frameworks is:

```html
<div data-oke-widget data-oke-reviews-ask-question-product-id="<PRODUCT_ID>"></div>
```

###