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.
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
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Collage: Image with text.
- Under Image collage, select Image 1, Image 2, Image 3, and Image 4. You can use 1 to 4 images.
- 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
- Click the Heading block and enter the Text. To highlight part of the heading, put it between [ and ].
- Choose a Heading size.
- Click the Subheading and Description blocks and enter their text.
- Click the Buttons block. Under Button 1, enter the button text, choose a Style, and select a Link.
- Optional: set up Button 2 the same way.
- To change the order of the text and buttons, drag the blocks in the left sidebar.
- Click Save.
Arrange the text and the collage
- Click the Collage: Image with text section.
- Under Image collage, choose a Collage alignment: Top, Middle, Bottom, or On scroll.
- Under Large screen, choose a Section ordering: Text first or Image first.
- Choose a Collage width: Regular or Large.
- Under Mobile screen, choose a Section heading alignment and a Section ordering.
- Click Save.
Add a countdown timer
- Click Add block > Countdown timer.
- Enter an End date in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight.
- Optional: enter an End time in the format HH:MM (24-hour clock).
- Select Hide the countdown when it ends to remove it after the end date, or clear it to keep it.
- Optional: enter an End text to show when the countdown ends.
- 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.
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
In other themes: Blum Image With Text · Normcore Images With Text
Updated on: 22/10/2026
Thank you!