Media grid & promo grid

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

1. Open the Theme Editor and add the Media grid section to the page.
2. 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. This is critical in presenting the section’s media effectively. In version 1.3.0 onwards, there is the option to show the media grid as a carousel on mobile.
   
3. In addition, a Section style Color scheme and a Text style Color scheme can be selected. Color schemes need to be set up first in Theme Settings > Colors.
4. Either click Add Slide or click on an existing media block.
5. 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.
   
6. 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

1. In the media block settings go to Text overlay – Content settings.
2. In these settings up to three lines of promotional text of varying sizes can be added.
   
3. 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.