# Media Carousel Widget

## Overview

Bring reviews to life with a stand-alone media carousel that displays customer-generated photos and videos submitted in published product reviews. Shoppers can hover over photos/videos to quickly see the review star rating and click to bring up a modal with the full review. An excellent addition to the product page to increase shopper engagement.

<figure><img src="https://317471629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKeDY1gVsPqUlb1dtZzTr%2Fuploads%2FpAlsbJ5RGOLVCQP0OUek%2Fmedia-carousel.png?alt=media&#x26;token=af0acbba-b78d-46e8-803e-ac8df1f2097a" 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-media-carousel.liquid`
2. Inside your newly created liquid file, add the following HTML snippet:

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

## Styling

The preferred method of configuring the Media 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 media carousel widget will only show media for the specified 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 media carousel widget only shows media for the specified group of products.                              | `string`   | Any valid product group ID in a GUID format e.g. `69d2e67d-b980-4333-97b7-30411807a7b1` |          |
|                               |                                                                                                                                                         |            |                                                                                         |          |

## Examples

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

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

#### **Product Widget**

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

```markup
<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.