Overview

Show off your products with a Media Grid: a gallery of the photos and videos your customers add to their reviews. You can place it on any page of your store, and show media for all your products or for a single product.

Before you begin

🔔 The Media Grid is available on the Growth plan and above. View pricing.

Install Okendo Reviews on your store first. See Installing Okendo on Shopify Online Store 2.0 or Setting up Okendo Reviews on Shopify Vintage Themes.

You'll edit your Shopify theme code, so make sure you can access it.

Install the Media Grid

Create a snippet for the grid

Start by creating a snippet file for the Media Grid in your theme:

Install folder: Snippets
Suggested file name: okendo-reviews-media-grid.liquid
Code:

<div data-oke-media-grid></div>

This video shows how to create the snippet file.

Once the snippet exists, use theme tags to place the grid wherever you want it on your store.

Use the tag {% render 'snippet-file-name' %}, where snippet-file-name is the name of the snippet file (without the .liquid suffix).

Home page example
To show the Media Grid on your home page, create a file called okendo-media-grid.liquid in your theme's Sections folder with this code:

{% render 'okendo-reviews-media-grid' %}

{% schema %}
  {
    "name": "Okendo Media Grid",
    "presets": [
      {
        "name": "Okendo Media Grid",
        "category": "Product"
      }
    ]
  }
{% endschema %}

When you next customize your home page, select Add section. Okendo Media Grid appears under Product, ready to add to the page.

This video shows how to add the Media Grid to your store.

By default, the Media Grid shows user-generated content from reviews of all your products. On a product page, you can limit it to media for that product by adding a data attribute:

<div data-oke-media-grid
     data-oke-reviews-product-id="shopify-{{ product.id }}"></div>

Customize the Media Grid

Add any of these optional data attributes to the Media Grid tag to change how it behaves. You can combine as many as you need.

Setting	What it does	Data attribute	Accepted values	Default
Link text	Text on the button that appears on hover	`data-oke-reviews-cell-link-text="VIEW"`	Any text	"READ MORE"
Gap size	Space between the cells in the grid	`data-oke-reviews-gap-size="0"`	A number	"10"
Hide the Load more arrow	Hides the arrow at the bottom of the grid, so it shows only the first set of images	`data-oke-reviews-hide-arrow="true"`	"true", "false"	"false"
Auto load	Loads more images as the shopper scrolls down	`data-oke-reviews-load-more-on-scroll="true"`	"true", "false"	"false"

⚠️ Avoid turning on auto load on any page with useful content below the Media Grid. Shoppers may not be able to reach it.

Change the grid layout

Two more optional data attributes control the size and placement of images in the grid.

Setting	What it does	Data attribute	Default
Desktop grid style	Image size and placement on desktop and tablet	`data-oke-reviews-grid-style="default"`	"default"
Mobile grid style	Image size and placement on mobile, or any browser under 768 pixels wide	`data-oke-reviews-mobile-grid-style="default-mobile"`	"default-mobile"

The accepted values for both attributes are shown below.

💡 Despite their names, you can use any of these values for either the desktop or the mobile attribute.

‘custom-dimensions: {width}x{height}’
The custom dimensions style needs the number of columns and rows to show on load, up to 25 images in total. For example, custom-dimensions: 7x2 shows a grid 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>

Add a Media Grid to your store