> For the complete documentation index, see [llms.txt](https://docs.okendo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.okendo.io/on-site/on-site-widgets/reviews-widget.md).

# 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="/files/YoI9R6fm7Wm2U1MkBw3O" 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="/files/0WflgytBkmWDhOcfaZgf" 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><tr><td><code>data-oke-order-by-tag-id</code></td><td>Used to sort the widget by a given featured tag id that has been exposed as a public tag</td><td><code>string</code></td><td>A tag ID copied from the On Site Displays -> Reviews Widget -> Reviews List tag picker.<br><br><a href="#creating-curated-review-widgets-using-feature-tags">See the section below for more details.</a></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>
```

### Creating Curated Review Widgets Using Feature Tags

You can create multiple review widgets that display reviews curated by specific feature tags (for example, "Winter 2026", "Great for Layering", etc.).

#### 1. Create and Assign a Review Tag

1. Navigate to **Reviews** or **Moderation**.
2. Open the review you want to feature.
3. Create a new tag (for example, `Winter 2026`).
4. Assign the tag to the review.

> Tags created in Reviews/Moderation are private by default and cannot be used by storefront widgets until they are exposed publicly.

***

#### 2. Make the Tag Public

1. Navigate to **On-Site Displays**.
2. Open the Reviews Widget you want to configure.
3. Locate the **Featured Reviews / Feature Tags** configuration.
4. Add the tag name (`Winter 2026`) to the list.
5. Save the widget configuration.

This action exposes the tag publicly and generates a **Tag ID**.

6. Copy the generated **Tag ID**.

***

#### 3. Add a Curated Reviews Widget

Add a Reviews Widget to your storefront (for example, using a Shopify Custom Liquid section).

Example:

```
<div
  data-oke-widget
  data-oke-reviews-product-id="{{ product.id }}"
  data-oke-order-by-tag-id="PLWTGAF">
</div>
```

Replace:

* `{{ product.id }}` with the target product ID (or your existing product widget configuration).
* `PLWTGAF` with the public Tag ID copied from the Reviews Widget settings.

***

#### 4. Publish and Verify

1. Save and publish your theme changes.
2. Load the storefront page containing the widget.
3. Confirm that reviews tagged with the specified feature tag appear first in the widget.

> Newly exposed tags may take a short period of time to propagate through the system before all tag-related UI elements appear.

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

```markup
<div data-oke-widget data-oke-reviews-product-id="shopify-{{ product.id }}" data-oke-order-by-tag-id="<THE TAG ID COPIED FROM OKENDO ADMIN>">
    {{ product.metafields.okendo.ReviewsWidgetSnippet }}
</div>
```

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://docs.okendo.io/on-site/on-site-widgets/reviews-widget.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.