Below are instructions for how to add a Media Carousel to your page to showcase the images and videos generated by your reviewers. These instructions assume you already have the Okendo Reviews app installed and have completed the basic installation. If you have not, please see our article Manually Install Okendo Reviews - Basic Setup.
Installation Instructions:
Step 1: Create a Snippet for the Carousel
Okendo offers a fair amount of customization to users for the implementation of the Media Carousel, but the first step is always to create a snippet file for the widget. Our suggested method for including this on your store is as follows:
Install folder: Snippets
Suggested file name: okendo-reviews-media-carousel.liquid
Code:
<div data-oke-media-carousel></div>
See video below on how to create a media carousel snippet file.
Step 2: Include the Widget on any Page
Having created the snippet file, you can use theme tags to place the carousel wherever you want it to be displayed.
For snippets, use the tag {% render 'snippet-file-name', product: product %} where snippet-file-name is the name of the snippet file you would like to include (without the .liquid suffix).
Example
If you wanted the carousel to appear on the product page, simply open the product-template.liquid file in the Sections folder and add:
{% render 'okendo-reviews-media-carousel', product: product %}
See video below on how to add a media carousel to your site.
Step 3: Set Up the Widget for a Single Product
Your Media Carousel can be set up to display media from across all products, or from just a single product. By default, the widget will show images submitted for your entire range of products, but it can easily be set up for a single product as described below:
Code:
<div data-oke-media-carousel
data-oke-reviews-product-id="shopify-{{ product.id }}"></div>
Customisation Instructions:
Step 1: Customise your Widget
The widget can be further customised for your store using optional data attributes which modify the look and behaviour of the carousel. A description, the data attribute, the default and possible values for each one are given below:
Auto-play
Description: The slider will advance automatically while it is visible on screen.
Data Attribute: data-oke-reviews-autoplay="true"
Accepted Values: "true", "false"
Default: "false"
Link Text
Description: The text which appears on the button visible on hover.
Data Attribute: data-oke-reviews-slide-link-text="VIEW"
Default: "READ MORE"
Minimum Images
Description: If fewer images than this are available, the widget will not appear.
Data Attribute: data-oke-reviews-min-images="3"
Accepted Values: Any number
Default: "1"
Slide Size
Description: The size of an individual slide in the carousel.
Data Attribute: data-oke-reviews-slide-size="small"
Accepted Values: "x-small", "small", "medium", "large", or "x-large"
Default: "medium"
Note: When slides are smaller than 150px (using "x-small" for example) then the review text will no longer appear on hover, only the star rating and link button will remain.
Arrow Position
Description: Whether the navigation arrows are positioned inside or outside the slider.
Data Attribute: data-oke-reviews-arrow-position="outside"
Accepted Values: "inside", "outside"
Default: "inside"
These optional attributes can be used together to personalise the widget for your Store.
Example
<div data-oke-media-carousel
data-oke-reviews-arrow-position="outside"
data-oke-reviews-slide-size="x-small"></div>
