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.
Installation Instructions:
Step 1: Create a Snippet for the Grid
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:
<div data-oke-media-grid></div>
See video below on how to create a media grid snippet file.
Step 2: Include the Widget on any Page
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:
{% render 'okendo-reviews-media-grid' %}
{% schema %}
{
"name": "Okendo Media Grid",
"presets": [
{
"name": "Okendo Media Grid",
"category": "Product"
}
]
}
{% endschema %}
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.
Step 3: Set Up the Widget for a Single Product
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:
<div data-oke-media-grid
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 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.
Step 2: Customise the Layout of your Grid
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.
Example
<div data-oke-media-grid
data-oke-reviews-grid-style="custom-dimensions: 5x2"
data-oke-reviews-mobile-grid-style="hero-three-mobile"
data-oke-reviews-hide-arrow="true"
data-oke-reviews-gap-size="0"></div>
