Media grid & Promo grid – User Guides

Showcase promotions, products and brand visuals with images and videos.

What are the media and promo grid sections?

These sections use media to showcase promotions, products and brand visuals. Images and videos can be arranged in a variety of ways, making it a flexible and efficient way to communicate with customers.

The promo grid contains many similar settings to the media grid but there are some key differences. In the promo grid, labels can be added to advertise promotions or key events, for example 50% off or price reductions. There is also an option to include additional text and a link under each image or video. In comparison, the media grid is most commonly used when there is less promotional content and the focus is on driving greater brand awareness.

How to set up the media grid section

Steps

Open the Theme Editor and add the Media grid section to the page.
In the Layout area of the settings, it is important to consider the optimum column and row height configuration for both large screens and mobile devices. There is also the option to Add spacing between images and Add spacing around text. Configuring these settings is critical in presenting the section's media effectively.
In addition, a Section style Color scheme and a Text style Color scheme with a further option to use Text overlay corner rounding can be selected. Color schemes need to be set up first in Theme Settings > Colors.
Either click Add Slide or click on an existing media block.
Either an image or a video can be selected. If a video is selected, also select an image as this will act as a cover image and display if the video cannot load.
Within each media block, the Layout settings are again the most critical. In step two of the above instructions, the section widths and columns were set. Here, each media grid block can also have the columns and rows adjusted. Each image or video can span between 1-4 columns wide or 1-3 rows tall.

Note

The Theme Editor window may not reflect layout changes when the editor frame is too narrow to fully present layout configurations. It is recommended to use the editor's View or Preview options to see how the layout is truly reflected on your storefront.

How to set up the promo grid section

See the How to set up the media grid section above for the basic steps to set this section up. The steps below focus on the additional labelling functionality.

Steps

In the media block settings go to Text overlay - Content settings.
In these settings up to three lines of promotional text of varying sizes can be added.
In the Text Overlay - Style settings, the position of the overlay can be adjusted and further text can be added in the Text below media setting.

FAQs

Why can't I select YouTube or Vimeo videos in the grid?

Initial tests indicate that using MP4 video is more performant than using third party sources. To keep the theme fast, we have limited this to MP4 in the current version of Canopy.

I have images that appear on their own row at certain screen sizes. How can I resolve this?

Double check the main section Layout settings and make sure that the column and row heights are set correctly. Secondly, do the same in the block Layout settings. It may take some trial and error before you get the optimum layout on all screen widths.

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!