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.
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 Distinction 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)
Examples & inspiration
Last updated
Was this helpful?