Media grid

The media grid is a way to highlight images with an optional quick add button. This section is ideal for displaying shoppable social media images from sites such as Instagram.

Media grid on Savoir demo store

Quick start

• Click into each image block to upload/select an image

• If you want to keep the rich text block, edit the nested heading and button blocks

Settings

• Desktop columns

• Mobile columns

• Layout: If the number of images exceeds the number of columns, choose to display them either as a grid or as a slideshow

• Container type: See common settings

• Vertical grid gap: Keep as default or override to create tight grids

• Horizontal grid gap: Keep as default or override to create tight grids

• Slideshow settings apply to the slideshow layout:

  • Arrow position: Choose between overlay (arrows appear over the blog posts) or below

  • Counter style: Choose between hidden, counter or progress bar

  • Button style: Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

Blocks

This section comes with four types of blocks:

• Section header (hidden by default, fill in the settings to display)

• Rich text: Allows you to add a simple rich text block like the Savoir example above ("Get Inspired")

• Image (similar to the image theme block):

  • Image

  • Image ratio

  • Behavior:

    • Link: Optionally link the image to another page or social media post

    • Link label: If you've added a link, describe the link destination for accessibility

    • Product: Optionally, connect a product to display the quick add button

• Buttons (hidden by default, fill in the settings to display)

Can't find the setting you're looking for? The following settings are explained in detail in common settings:

• Container type

• Color scheme/Color scheme transition

• Padding

• Borders

Examples & inspiration

Composition media grid, featuring square images with no spacing.

Gloss media grid, featuring portrait images with no spacing

Gaia media grid, featuring square images with no spacing

Primavera media grid, featuring images with narrow spacing

Savoir media grid, with a page width container and narrow spacing