Designing a Media Grid with Widget Plus

Motivate shoppers with a gallery of photos and videos

Amanda Calderon avatar
Written by Amanda Calderon
Updated over a week ago

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.

  1. Open your Okendo admin.

  2. Click Displays in the sidebar.

  3. Scroll down and click Media Grid.

  4. Click the Settings tab to customize the appearance of your Media Grid:

    1. Choose a layout in the Desktop Layout and Mobile Layout drop-down lists.

    2. Enter a number in the Gap Size field to set the distance between your photos and videos.

    3. Change Read More in the Link Text field to something that better fits your brand.

    4. Toggle the Infinite Scroll switch on to automatically load more images.

    5. Expand the color picker to change the Show More Background Color and Show More Arrow Color.

  5. Click Save Changes.

Media Grid style definitions

Style Setting

What is does

Desktop Layout

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:

  • Default Desktop

  • Large Centered

  • X Large

  • Two Heroes

  • Custom Desktop

Mobile Layout

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:

  • Default Mobile

  • Alternate Mobile

  • Hero Three Mobile

  • Custom Mobile

Gap Size

Amount of space between the photos and videos in your Media Grid.

Link Text

Text that appears when you hover over the photo or video and serves as the link to the product details page.

Infinite Scroll

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)

Related articles

Did this answer your question?