# Reviews Carousel Widget

## Overview

Surface customer reviews at key conversion points throughout the buying journey such as the homepage, collection page, product page or even landing pages with the Reviews Carousel. The Reviews Carousel will scroll through the highest rated, most recent published reviews across all products and can be styled in a variety of ways.

<figure><img src="https://317471629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKeDY1gVsPqUlb1dtZzTr%2Fuploads%2FJqIjnUvrLggYhPNeZvHA%2Freviews-carousel.png?alt=media&#x26;token=409c151a-6a8c-4f02-a515-413f24d7eac8" 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-carousel.liquid`
2. Inside your newly created liquid file, add the following HTML snippet:

   ```tsx
   <div data-oke-carousel></div>
   ```
3. Customize your snippet with the data attributes listed [here](#reviews-carousel-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-carousel' %}`

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

| Data Attribute                | Description                                                                                                                                            | Value Type | Supported Values                                                                        | Required |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | --------------------------------------------------------------------------------------- | :------: |
| `data-oke-reviews-product-id` | Used to specify a Shopify Product ID with the word `shopify-` in front of it. The star snippet will only show aggregate data for a particular product. | `string`   | Any valid product ID in the format `shopify-` e.g. `shopify-1234567`.                   |          |
| `data-oke-reviews-group-id`   | Used to specify an Okendo Group ID so that the reviews widget only shows reviews for the specified group of products.                                  | `string`   | Any valid product group ID in a GUID format e.g. `69d2e67d-b980-4333-97b7-30411807a7b1` |          |
| `data-oke-header-badge-url`   | Used to hyperlink the reviews badge above the carousel with a link relative to current URL.                                                            | `string`   |                                                                                         |          |

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

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

```html
<div data-oke-carousel data-oke-reviews-product-id="shopify-{{ product.id }}"></div>
```

The general format for other frameworks is:

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

#### **Group 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:

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

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

### **Customizing The Widget Header**

#### **Badge URL**

```html
<div data-oke-carousel data-oke-header-badge-url="<RELATIVE_URL>"></div>
```