> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.
![Collage: Media section with a video tile and two image tiles](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/collage-media-1_2lchcy.jpg)

**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.
![Collage: Media on mobile, with tiles in a 2-column grid](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/collage-media-2_5d3kgp.jpg)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color schemes | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |
| Section subheading | Adds a short line of text above the heading. |
| Section heading | Sets the section heading. Put words between [ and ] to highlight them. You choose the highlight style in Theme settings > Typography. |
| Heading size | Sets the size of the section heading: Headline, H1, H2, or H3. |
| Section description | Adds text below the heading. |
| Show layout grid | Shows grid lines in the theme editor to help you place the tiles. Customers don't see them. |

### Large screen and Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section heading alignment | Aligns the section heading Left or Center. |
| Row height | Sets the height of one grid row: from 150 to 400 px on large screens, and from 100 to 350 px on mobile. |

### Text block settings
| Setting | What it does |
| ---- | ---- |
| Heading | Sets the tile heading. Put words between [ and ] to highlight them. |
| Heading size | Sets the size of the tile heading: Headline or H1 to H6. |
| Description | Adds text below the tile heading. |
| Button text | Sets the button text. If you leave it empty, the button is hidden and the whole tile opens the Link. |
| Style | Shows the button as Filled, Outlined, or Text link. |
| Link | Sets the page that the button or tile opens. |
| Content position (Large screen and Mobile screen) | Places the text at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |
| Column (Large screen) | Sets how many grid columns the tile covers, from 1 to 4. |
| Row (Large screen) | Sets how many grid rows the tile covers, from 1 to 3. |
| Column (Mobile screen) | Sets how many grid columns the tile covers on mobile: 1 or 2. |
| Row (Mobile screen) | Sets how many grid rows the tile covers on mobile, from 1 to 3. |
| Background | Sets the background color of the tile. |
| Text | Sets the text color of the tile. |

### Image and Video block settings
| Setting | What it does |
| ---- | ---- |
| Heading, Heading size, Button text, Style, Link | Work the same as in the Text block. They appear under Card content. |
| Image | Sets the tile image. 1000 x 1500 px (portrait) or 1500 x 1500 px (square) is recommended. Appears only in the Image block. |
| Mobile image | Replaces the image on screens below 1025 px. If you don't add one, the image is used. Appears only in the Image block. |
| Video source | Chooses where the video comes from: External (YouTube or Vimeo) or Shopify-hosted. Appears only in the Video block. |
| External video | Sets the YouTube or Vimeo link. Appears only in the Video block. |
| Shopify-hosted video | Sets a video from your Shopify files. Appears only in the Video block. |
| Content position, Column, Row | Work the same as in the Text block. |
| Mask overlay | Sets the color of the layer over the image or video. |
| Mask overlay opacity | Sets how strong the overlay is, from 0 % to 90 %. |
| Text overlay | Changes the color of the tile text. |

## 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](https://doc.ecomx.co/en/article/shine-image-collage-with-text-1l2xj98/)
- [Shine Media With Text](https://doc.ecomx.co/en/article/shine-media-with-text-column-hds0dn/)
- [Shine Video Banner](https://doc.ecomx.co/en/article/shine-video-banner-4gepr1/)
- [Shine Gallery Shoppable](https://doc.ecomx.co/en/article/shine-image-gallery-1razuoh/)

**In other themes:** [Blum Content Collage](https://doc.ecomx.co/en/article/blum-content-collage-15h5ipd/) · [Electro Content Collage](https://doc.ecomx.co/en/article/electro-how-to-edit-electro-content-collage-4yio74/) · [Normcore Content Collage](https://doc.ecomx.co/en/article/normcore-content-collage-18vbrlf/)