Create excitement and drive engagement about your products by displaying a gallery of photos and videos on any page of your store's site. Okendo's Media Grid allows you to design a gallery that blends with your brand, shows the latest images from all of your products, or shows a range of the latest images from a single product - your choice.
The image below is an example of a media grid with the Mobile Layout - Default Layout setting selected.
In this article, you learn how to:
Before you begin
You must install the Okendo Reviews app before you can add a Media Grid to your Shopify theme. Click here to see how to complete the basic installation.
Style your Media Grid
Before you start styling your Media Grid, consider reviewing the style definitions in the next section to understand how changing the settings changes the widget.
Open your Okendo admin.
Click Displays in the sidebar.
Scroll down and click Media Grid.
Click the Settings tab to customize the appearance of your Media Grid:
Enter a number in the Gap Size field to set the distance between your photos and videos.
Change Read More in the Link Text field to something that better fits your brand.
Toggle the Infinite Scroll switch on to automatically load more images.
Click Save Changes.
Media Grid style definitions
What is does
Size and arrangement of the photos and videos within your Media Grid as they appear on a desktop device.
You can choose from these options:
Size and arrangement of photos and videos within your Media Grid as they will appear on a mobile device.
You can choose from these layouts:
Amount of space between the photos and videos in your Media Grid.
Text that appears when you hover over the photo or video and serves as the link to the product details page.
Automatically loads more images after you reach the bottom of the grid and click the Show More Arrow (if you enable it).
Show More Arrow
Down arrow button that appears at the bottom of the grid and loads more photos and videos when clicked.
Show More Background Color
This setting adjusts the background color of the Show More Arrow button (shown in green).
Show More Arrow Color
This setting adjusts the color of the arrow within the Show More Arrow button. (shown in green)