Below are instructions for how to add a Media Grid to your store, using photos and videos to showcase your products. 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.

There are a few options provided for customising the Media Grid on your Store, but the first step will always be 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-grid.liquid
​Code:

See video below on how to create a media grid snippet file.

Having created the snippet file, you can use theme tags to place the grid wherever you would like it to be displayed on your Store.

For snippets, use the tag {% render 'snippet-file-name' %} where snippet-file-name is the name of the snippet file you would like to include (without the .liquid suffix).

Home Page Example
If you wanted the Media Grid widget to appear on your Home Page, simply create a file in the Sections folder of your Theme called okendo-media-grid.liquid with the following code:

Now when you customise your Home Page, after selecting Add Section there will be an option under Product titled Okendo Media Grid which you can insert onto the Home Page.

See video below on how to add a media grid to your site.

The Media Grid by default will be filled using User Generated Content that has been submitted by reviewers for all of the products in your store. If you would like to display the Media Grid on a product page, it is possible to narrow down the range of images to that of a single product by adding a data attribute as described below:
​Code:

The widget can be further customised for your store using optional data attributes which modify the layout and behaviour of the grid. A description, the data attribute, the default and possible values for each one are given below:
​
​Link Text
​Description: The text which appears on the button which is visible on hover.
​Data Attribute: data-oke-reviews-cell-link-text="VIEW"
​Default: "READ MORE"

Gap Size
​Description: The amount of space between the cells on the grid.
​Data Attribute: data-oke-reviews-gap-size="0"
​Accepted Values: A number
​Default: "10"

Hide the "Load More" Arrow
​Description: Hides the arrow at the bottom of the grid, making it impossible for the grid to load more than the initial selection of images.
​Data Attribute: data-oke-reviews-hide-arrow="true"
​Accepted Values: "true", "false"
​Default: "false"

Auto Load
​Description: The grid will automatically load more images as the user scrolls down.
​Data Attribute: data-oke-reviews-load-more-on-scroll="true"
​Accepted Values: "true", "false"
​Default: "false"
​Note: It is not recommended to have this set to true on any page where there will be useful content beneath the widget.

These optional attributes can be used together to personalise the widget as much or as little as required by your Store.

There are two other optional data attributes which can be set on the widget tag, and they are designed to help customise the layout of the images in terms of sizing and placement of the images.
​
​Desktop Media Grid Style
​Description: The sizing and placement of images when the page is loaded on a desktop or tablet device.
​Data Attribute: data-oke-reviews-grid-style="default"
​Accepted Values: See below
​Default: "default"

Mobile Media Grid Style
​Description: The sizing and placement of images when the page is loaded on a mobile device or a browser with a width of under 768 pixels.
​Data Attribute: data-oke-reviews-mobile-grid-style="default-mobile"
​Accepted Values: See below
​Default: "default-mobile"

Accepted Values for Media Grid Style:
Note that despite the names, any of these can be used for either the desktop or mobile Grid Style data attributes.

‘custom-dimensions: {width}x{height}’
The custom dimensions style also requires you to specify the number of columns and rows you would like to have displayed on load (there is a limit of 25 images in total on load, though). For example: custom-dimensions: 7x2 would produce a Media Grid which is 7 images wide and 2 images tall.