Media grid
The Media grid fills a tidy grid with photo and video tiles of different sizes — one wide, two tall, four small — like a photo wall. The theme automatically fills the gaps.
What it does
Section titled “What it does”Use it to show off a set of moments — lifestyle shots, short clips, campaign visuals — with more energy than a uniform row. Each tile picks a width and height on a 4-unit grid; the theme packs the remaining space by itself.
Important: the grid is not an auto-crop of one big photo. Every tile is its own image or video. If you want shoppers to click spots on a single photo, use the Shop the scene section.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section.
- Click Add section and choose Media grid, picking a starting style: Feature mosaic, Checkerboard, or Even tiles.
- Click Add block → Media tile for each item (up to 12), set its size and media.
- Save.
Choose a style
Section titled “Choose a style”There is no layout setting — the three starting styles differ only in how the demo tiles are sized:
| Starting style | Grid feel |
|---|---|
| Feature mosaic | One large hero tile + supporting tiles |
| Checkerboard | Alternating large and small tiles |
| Even tiles | All tiles the same size |
Whichever you pick, every tile’s size is yours to change with its Width and Height settings.
Set it up: quick start
Section titled “Set it up: quick start”- Add the section with the Feature mosaic starting style.
- In each Media tile block, upload an Image (or set a video) and adjust Width and Height.
- Set Tile spacing to taste — 0 makes the tiles touch.
- Save and check the phone: the grid becomes two columns, with your tiles keeping their relative sizes.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”| Setting | Default | Options | What it does |
|---|---|---|---|
| Subheading | Empty | Text | Small line above the heading |
| Heading | “Moments we love” | Text | Section title; leave empty for no title |
| Tile spacing | 8 px | 0–32 px, step 2 | The gap between tiles |
Blocks
Section titled “Blocks”Add up to 12 Media tile blocks.
| Block | Limit | What it adds |
|---|---|---|
| Media tile | 12 | One photo or video with its grid size and optional link |
Media tile settings
| Setting | Default | Options | What it does |
|---|---|---|---|
| Image | Empty | Image picker | The tile’s photo. Shown when no video is set; used as the video cover when a video is set |
| Video (uploaded to Shopify) | Empty | Video picker | Shopify-hosted video; takes priority over the image and the URL below |
| Or video URL | Empty | URL | YouTube or Vimeo link — used when no Shopify-hosted video is set |
| Link | Empty | URL | Where the tile leads. Skipped when the tile has a video — the video’s play action wins |
| Width | 1 | 1–4, step 1 | How many grid columns the tile spans (the grid is 4 units wide; 1×1 is a square) |
| Height | 1 | 1–4, step 1 | How many rows the tile spans — pair width and height for squares or rectangles |
Images and content tips
Section titled “Images and content tips”- Squares for even tiles: 1×1 tiles look best with square images (around 1000×1000 px). Large tiles need proportionally bigger photos — a 2×2 tile wants about 2000×2000 px to stay sharp.
- Videos: upload to Shopify for tiles that play in place; YouTube/Vimeo links open in their player. The image doubles as the video’s cover.
- Photos are cropped to the tile shape — set a focal point in the image editor so the subject survives cropping.
Good to know
Section titled “Good to know”- The grid fills itself. If your tiles don’t complete a full row, the theme packs the space automatically — you never manage empty slots by hand.
- Videos replace links. A tile with a video ignores its Link; use photos for clickable tiles.
- On phones the grid is two columns, and wide tiles span both — check tall compositions in the mobile preview.
Example setups
Section titled “Example setups”Mosaic of moments. One 2×2 hero photo, one 2×1 wide video, two 1×1 photos — the Feature mosaic recipe with your own media.
Even gallery. Even tiles starting style, six 1×1 photos, Tile spacing 16 px — a calm customer-photo wall.
Common questions
Section titled “Common questions”My tile looks blurry. The photo is too small for the tile size — use bigger images for wide or tall tiles (a 2×2 tile wants around 2000×2000 px).
The link doesn’t work on one tile. That tile has a video — videos take over the tile and the Link is skipped. Remove the video or move the link to a photo tile.
Can I auto-cut one big image into tiles? No — each tile is its own media. For clickable hotspots on a single photo, use the Shop the scene section.