> ## 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: Image With Text

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

A Collage: Image with text section places a heading, text, and buttons next to a collage of up to 4 images. Use it to tell a short story about your brand, a collection, or how a product is made.

> **Note:** You can add this section to any template, except the header and footer. The section comes with a Subheading, Heading, Description, and Buttons block. You can also add 1 Countdown timer block.
![Collage: Image with text section with text, buttons, and a 3-image collage](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/collage-iwt-1_1k6ojo3.jpg)

**What you can do**
- Add the section and your images
- Add your text and buttons
- Arrange the text and the collage
- Add a countdown timer
- See what customers see
- Change the collage and layout settings
- Fix common problems

---

## Add the section and your images
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Collage: Image with text**.
3. Under **Image collage**, select **Image 1**, **Image 2**, **Image 3**, and **Image 4**. You can use 1 to 4 images.
4. Click **Save**.

The images form 2 columns: **Image 1** and **Image 3** on the left, **Image 2** and **Image 4** on the right. If you add only 1 image, it fills the whole collage.

> **Tip:** Each image keeps its own shape. Mix portrait and landscape images so the two columns end at different heights, which gives the collage its layered look.

## Add your text and buttons
1. Click the **Heading** block and enter the **Text**. To highlight part of the heading, put it between **\[** and **]**.
2. Choose a **Heading size**.
3. Click the **Subheading** and **Description** blocks and enter their text.
4. Click the **Buttons** block. Under **Button 1**, enter the button text, choose a **Style**, and select a **Link**.
5. Optional: set up **Button 2** the same way.
6. To change the order of the text and buttons, drag the blocks in the left sidebar.
7. Click **Save**.

## Arrange the text and the collage
1. Click the **Collage: Image with text** section.
2. Under **Image collage**, choose a **Collage alignment**: **Top**, **Middle**, **Bottom**, or **On scroll**.
3. Under **Large screen**, choose a **Section ordering**: **Text first** or **Image first**.
4. Choose a **Collage width**: **Regular** or **Large**.
5. Under **Mobile screen**, choose a **Section heading alignment** and a **Section ordering**.
6. Click **Save**.

## Add a countdown timer
1. Click **Add block** > **Countdown timer**.
2. Enter an **End date** in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight.
3. Optional: enter an **End time** in the format HH:MM (24-hour clock).
4. Select **Hide the countdown when it ends** to remove it after the end date, or clear it to keep it.
5. Optional: enter an **End text** to show when the countdown ends.
6. Click **Save**.

> **Caution:** A countdown that has ended can mislead customers. Update the end date or remove the block after the promotion ends.

## What customers see
- **Large screens:** the text and the collage sit side by side, in the order you chose. With **Large**, the collage takes more of the width than the text.
- **On scroll:** with this alignment, the shorter column of images stays in place while customers scroll past the taller one.
- **Phones and tablets:** below 1025 px, the text and the collage stack, in the mobile order you chose. The images stay in 2 columns.
- **Hover:** on large screens, an image zooms in slightly when customers point at it.
- **Buttons:** customers click a button to open its link.
![Collage: Image with text on mobile, with the text above the collage](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/collage-iwt-2_lcu3ay.jpg)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color schemes | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |

### Image collage
| Setting | What it does |
| ---- | ---- |
| Collage alignment | Lines up the two image columns at the Top, Middle, or Bottom. On scroll keeps the shorter column in place while customers scroll. |
| Image 1 to Image 4 | Set the collage images. Image 1 and Image 3 go in the left column, Image 2 and Image 4 in the right column. |

### Large screen
| Setting | What it does |
| ---- | ---- |
| Section ordering | Shows the text first (Text first) or the collage first (Image first). |
| Collage width | Sets how wide the collage is: Regular (half the width) or Large (more than half). |

### Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section heading alignment | Aligns the text Center or Left. |
| Section ordering | Shows the text above the collage (Text first) or below it (Image first). |

### Subheading, Heading, and Description block settings
| Setting | What it does |
| ---- | ---- |
| Text | Sets the text of the block. In the Heading block, put words between [ and ] to highlight them. You choose the highlight style in Theme settings > Typography. |
| Heading size | Sets the size of the heading: Headline, H1, H2, or H3. Appears only in the Heading block. |

### Buttons block settings
| Setting | What it does |
| ---- | ---- |
| Button | Sets the button text, under Button 1 and Button 2. If you leave it empty, the button is hidden. |
| Style | Shows the button as Filled, Outlined, or Text link. |
| Link | Sets the page that the button opens. |

### Countdown timer block settings
| Setting | What it does |
| ---- | ---- |
| Hide the countdown when it ends | Removes the timer after the end date. |
| End date | Sets the end date in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight. |
| End time (optional) | Sets the end time in the format HH:MM (24-hour clock). If you leave it empty, the countdown ends at 23:59. |
| End text | Shows a message when the countdown ends. If you leave it empty, no message appears. |
| Countdown background | Sets the background color of the timer. |
| Countdown number | Sets the color of the numbers. |
| End text (Custom color) | Sets the color of the end text. |

## Troubleshooting
**My images are in the wrong column.**
The collage places **Image 1** and **Image 3** on the left, and **Image 2** and **Image 4** on the right. Swap the images between the settings to change their place.

**The text doesn't show next to the collage.**
The text comes from the blocks. If you remove all blocks, only the collage shows. Add a **Heading** or **Description** block.

**The collage looks uneven.**
Each image keeps its own shape. Use images with the same ratio for an even grid, or choose a **Collage alignment** to line the columns up.

## Related articles
- [Shine Collage: Media](https://doc.ecomx.co/en/article/shine-content-collage-1bqbejq/)
- [Shine Media With Text](https://doc.ecomx.co/en/article/shine-media-with-text-column-hds0dn/)
- [Shine Image Banner](https://doc.ecomx.co/en/article/shine-image-banner-12txcz9/)
- [Shine Countdown Timer](https://doc.ecomx.co/en/article/shine-countdown-timer-1itlp4n/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)

**In other themes:** [Blum Image With Text](https://doc.ecomx.co/en/article/blum-image-with-text-asff90/) · [Normcore Images With Text](https://doc.ecomx.co/en/article/normcore-images-with-text-section-rs3ens/)