Skip to main content
All CollectionsOkendo ReviewsDesign Your Reviews DisplaysWidget Plus
Designing a Media Grid with Widget Plus
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 Okendo's Media Grid empowers you to showcase a captivating gallery of photos and videos on any page of your store's site. Whether you want to display the latest images from all your products or highlight a range of images from a single product, the Media Grid offers versatility to suit your brand.

In this article, you learn how to:

Style your Media Grid

  1. Open your Okendo admin.

  2. Click Displays in the sidebar and select Media Grid.

  3. Go to the Settings tab to customize the appearance of your Media Grid:

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

    • Set the distance between photos and videos using the Gap Size field.

    • Modify the text in the Link Text field to align with your brand.

    • Toggle the Infinite Scroll switch to automatically load more images.

    • Customize the Show More Background Color and Show More Arrow Color using the color picker.

  4. 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?