Shine Collage: Media

Theme: Shine · Section type: All-template section

A Collage: Media section arranges images, background videos, and text cards in a flexible grid. You choose how many columns and rows each tile covers, so you can build an editorial layout that mixes photos, film, and copy.

Note: You can add this section to any template and to the footer, but not to the header. The section comes with a Text, a Video, and 2 Image blocks. The grid has 4 columns on large screens and 2 columns on mobile.

What you can do

• Add the section and your tiles
• Set the size of each tile
• Add a button or make a tile clickable
• Make the text easy to read
• See what customers see
• Change the grid and tile settings
• Fix common problems

Add the section and your tiles

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click Add section > Collage: Media.
3. Enter a Section subheading, a Section heading, and a Section description. Leave any of them empty to hide it.
4. Click an Image block. Under Image, select an Image. Optional: select a Mobile image.
5. Click the Video block. Under Video, choose a Video source and add an External video link or a Shopify-hosted video.
6. Click the Text block and enter a Heading and a Description.
7. To add a tile, click Add block > Image, Video, or Text.
8. Click Save.

Tip: Keep Show layout grid selected while you build the collage. It shows the grid lines in the theme editor only, so you can see where each tile sits.

Set the size of each tile

Each tile covers a number of grid columns and rows. Tiles fill the grid from left to right, in the order of the blocks.

1. Click a block.
2. Under Large screen, choose a Column value from 1 to 4 and a Row value from 1 to 3.
3. Under Mobile screen, choose a Column value of 1 or 2 and a Row value from 1 to 3.
4. Click the section. Under Large screen and Mobile screen, drag Row height to set the height of one row.
5. Click Save.

Tip: Plan the layout so the tiles fill whole rows. For example, on large screens, a tile with Column 2 next to 2 tiles with Column 1 fills a row of 4 columns.

Add a button or make a tile clickable

1. Click a block.
2. Enter a Button text, choose a Style, and select a Link.
3. To make the whole tile clickable instead, clear the Button text and keep the Link.
4. Click Save.

Note: When Button text is empty, the whole tile opens the Link. When it has text, only the button opens the link.

Make the text easy to read

1. Click an Image or Video block.
2. Under Custom color, select a Mask overlay color and drag Mask overlay opacity, from 0 % to 90 %.
3. Optional: select a Text overlay color.
4. For a Text block, set the Background and Text colors under Custom color.
5. Click Save.

What customers see

• Large screens: the tiles form a grid of 4 columns. Each tile shows its heading and button at the content position you chose.
• Phones and tablets: below 1025 px, the grid has 2 columns, and the mobile column, row, and row height settings apply. Image tiles show the mobile image if you added one.
• Videos: Video tiles play automatically on a loop, without sound or controls, when they scroll into view.
• Links: customers click a button to open its link, or click anywhere on a tile that has no button.

Settings reference

General

Large screen and Mobile screen

Text block settings

Image and Video block settings

Troubleshooting

There are gaps in my collage.
The tiles don't fill whole rows. Change the Column and Row values so each row adds up to 4 columns on large screens and 2 columns on mobile.

The tile doesn't open my link.
When a tile has a Button text, only the button opens the link. Clear the Button text to make the whole tile clickable, and check that Link is set.

I see grid lines on my collage.
The lines come from Show layout grid and appear only in the theme editor. Customers don't see them.

My uploaded video doesn't show.
Check that Video source is set to Shopify-hosted in the Video block.

Related articles

• Shine Collage: Image With Text
• Shine Media With Text
• Shine Video Banner
• Shine Gallery Shoppable

In other themes: Blum Content Collage · Electro Content Collage · Normcore Content Collage

Updated on: 22/10/2026