> ## 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).

# Blum Content Collage

**Theme:** Blum · **Section type:** All-template section

The Content collage section puts up to 3 large tiles side by side: a collection, a product, or an image with a button. Use it to feature a campaign, a best-seller, and a collection together in one eye-catching block.

> **Note:** You can add this section to any template, except the header and footer. A Content collage holds up to 3 items. When you add it, it comes with 1 Collection, 1 Product, and 1 Image item.
![Content collage with a collection, two products, and a prominent badge](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/collage-1_c0arug.png)

**What you can do**
- Add the section and choose your items
- Make one item bigger than the others
- Add a prominent badge
- See what customers see
- Change the item settings
- Fix common problems

---

## Add the section and choose your items
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Content collage**.
3. Under **General**, enter a **Section heading**, and optionally a **Section subheading** and **Section description**.
4. Click the **Collection** item and select a **Collection**.
5. Click the **Product** item and select a **Product**.
6. Click the **Image** item. Select an **Image**, enter a **Heading**, and enter the button **Label** and **Link**.
7. To change the mix, delete an item or click **Add block** > **Collection**, **Product**, or **Image**.
8. Click **Save**.

> **Tip:** Choose images with similar colors and lighting. Three tiles sit edge to edge, so very different photos can look busy.

## Make one item bigger than the others
1. Click the **Content collage** section.
2. Under **Layout**, set **Items ordering** to **Main item first** (the first item is large) or **Main item last** (the last item is large). **Equal** gives all items the same size.
3. With 3 items and a main item, turn **Enable stacked layout** on to stack the 2 smaller items on top of each other next to the main item. Turn it off to place them side by side.
4. Set **Collage width on desktop** to **Wide** (edge to edge) or **Compacted** (inside the page margins).
5. Click **Save**.

> **Note:** **Enable stacked layout** has no effect with **Equal** ordering.

## Add a prominent badge
1. Under **Prominent badge**, enter the badge **Text**. Leave it empty to hide the badge.
2. Choose the **Accent scheme** (Main or Extra), **Position** (Left or Right), and **Shape** (Star, Diamond, or Asterisk).
3. Click **Save**.

## What customers see
- **Tiles:** each item shows a full-bleed image with its text on top. A mask overlay darkens the image so the text stays readable.
- **Collection item:** shows the collection title and a "View \[number] products" link when **Show number of products** is on.
- **Product item:** shows the product title, price (with the compare-at price on sale items), the star rating when turned on, and a "View product" link.
- **Image item:** shows the heading and your button.
- **Clicking:** customers can click anywhere on a tile to open the collection, product, or button link, even when **Show item button** is off.
- **Phones:** the tiles stack one below the other.
![Content collage at Wide width, filling the screen on desktop](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/collage-2_k6iq2j.png)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. |
| Section subheading, Section heading, Section description | The text above the collage. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Collage width on desktop | Wide shows the collage edge to edge and as tall as the screen. Compacted keeps it inside the page margins. |
| Content alignment | Aligns the section heading and the item text Left or Center. |
| Items ordering | Equal, Main item first, or Main item last. See "Make one item bigger than the others" above. |
| Enable stacked layout | Stacks the 2 smaller items next to the main item. Not applicable with Equal ordering. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Items
| Setting | What it does |
| ---- | ---- |
| Image ratio | Shapes the item images as Square (1:1) or Portrait (2:3). Not applicable with the Wide collage width. |
| Show item button | Shows the link button on each item. Items stay clickable without it. |

### Prominent badge
| Setting | What it does |
| ---- | ---- |
| Text | The badge text. Leave it empty to hide the badge. |
| Accent scheme | Colors the badge with the Main or Extra accent from Theme settings > Colors > Accent. Appears after you enter text. |
| Position | Places the badge on the Left or Right. Appears after you enter text. |
| Shape | Star, Diamond, or Asterisk. Appears after you enter text. |

### Collection item settings
| Setting | What it does |
| ---- | ---- |
| Collection | The collection to show. Its featured image is used as the tile image. |
| Show number of products | Shows the number of products in the link text. |
| Mask overlay opacity | Sets how dark the mask over the image is, from 0% to 90%. |
| Mask overlay | Sets the color of the mask. The color picker sits right below Mask overlay opacity. |
| Text overlay | Sets the color of the text on the tile. |

### Product item settings
| Setting | What it does |
| ---- | ---- |
| Product | The product to show. Its featured image is used as the tile image. |
| Show rating | Shows the star rating. Set up product ratings in Theme settings > Product information. |
| Mask overlay opacity, Mask overlay, Text overlay | Same as on the Collection item. |
| Star rating overlay | Sets the color of the rating stars. |

### Image item settings
| Setting | What it does |
| ---- | ---- |
| Image | The tile image. |
| Mask overlay opacity, Mask overlay, Text overlay | Same as on the Collection item. |
| Heading | The text on the tile. |
| Label | The button text. |
| Link | Where the button and the tile go. Appears after you enter a label. |

## Troubleshooting
**I can't add a fourth item.**
A Content collage holds up to 3 items. Add a second Content collage section to show more.

**Enable stacked layout does nothing.**
Stacking works only with 3 items and **Items ordering** set to **Main item first** or **Main item last**.

**Changing Image ratio has no effect.**
**Image ratio** doesn't apply when **Collage width on desktop** is **Wide**. Switch to **Compacted**.

**The star rating doesn't show.**
Turn on **Show rating** in the Product item, and set up product ratings in **Theme settings** > **Product information**. A product with no reviews has nothing to show.

## Related articles
- [Blum Featured Collections](https://doc.ecomx.co/en/article/blum-featured-collections-1ioinmx/)
- [Blum Collection List](https://doc.ecomx.co/en/article/blum-collection-list-csa3sl/)
- [Blum Featured Product](https://doc.ecomx.co/en/article/blum-featured-product-1euueqp/)
- [Blum Image Banner](https://doc.ecomx.co/en/article/blum-image-banner-jzf00j/)