“Tell me more about the collage grid home page section.”

Context’s collage grid feature is a versatile way to show off special collections and seasonal offerings. It lets you create a gallery of images or videos, each one with its own (optional) text, links and size.

Mosaic grid on desktop

On mobile devices, grid items appear one after another instead of in rows:

While customizing your home page, this feature is available by using the Add section button.

Context may crop your images to help them fit uniformly in the grid. To reduce cropping, we recommend that you upload images that have a 3:2 aspect ratio (for Small grid items) or a 3:4 aspect ratio (for Large grid items).

Mosaic grid diagram

Content

You can add up to nine content blocks for each collage grid. To add one, use the Add item button.

Each block as a number of settings that let you finely tweak its look and feel.

Image
Add an image to the grid.
Block size
Choose whether the block should be Small or Large.
Video link
Show a video instead of an image in this block. Learn more

The image you add will be used as a fallback if the video fails for some reason.

Overlay opacity
You can add a colored overlay to your full width image. And, you can set how visible the overlay is. 0% is completely transparent, and 100% is completely visible.
Overlay color
You can change the color of the overlay.

We recommend using black or white, as these colors will look great with a wide variety of images.

Text color
You can change the text color for text overlaying the full width image.
Heading
Add heading text. We recommend keeping this to a few words.
Subheading text
Add a subheading or description. We recommend keeping this to a line or two.
Max width of text
You can adjust the width available to the heading and subheading text.

We recommend adjusting this and checking the live preview to get it just right for your image.

Link
Paste a URL or add a link to a page in your store.
Link text
Add text that should be used for your link.
Link style
You can change the link style to Button or Link with arrow.
Horizontal text position
You can change the horizontal text position to Left, Center or Right.

We recommend adjusting this and checking the live preview to get it just right for your image.

Vertical text position
You can change the vertical text position to Top, Middle or Bottom.

We recommend adjusting this and checking the live preview to get it just right for your image.

Upload a video

You’ll need an MP4 video if you plan to use a Video link setting for this section. We recommend using a 20- to 30-second video that’s under 10MB.

You need to host a video file that is accessible as a direct URL. Video embeds from YouTube, Vimeo or other video streaming services do not work.

You can use the Shopify Files uploader to host video files that are smaller than 20MB:

  1. Go to the Shopify Files uploader screen in your Shopify dashboard.
  2. Use the Upload files button to add a video file from your computer.
  3. Once it has been uploaded, copy the URL next to the file. It should look something like this: https://cdn.shopify.com/s/files/1/0074/8165/5349/files/my-video-filename.mp4.
  4. Paste the link into the video URL field in the section settings.