The Collage grid section lets you create a flexible media layout with images and videos. You can use it to highlight collections, campaigns, product stories, lookbooks, promotions, or brand content in a custom grid.
Each item in the collage is added as a block. You can control how much space each block takes by adjusting its column size and row size.
Section overview
The Collage grid section supports these block types:
- Image block
- Video block
Each block can include:
- Image or video media
- Optional subheading
- Optional heading
- Optional link
- Text position
- Mobile-specific media
- Overlay color
- Highlighted text style
The section also includes global settings for the grid layout, heading, colors, spacing, full width, rounded corners, and divider.
How to Set Up the Collage Grid Section in Concept
STEPS:
Add the Collage grid section
Open your Shopify theme editor and add the section to the page where you want to display the collage.
- From your Shopify admin, go to Online Store > Themes.
- Find your Concept theme and click Customize.
- Open the page template where you want to add the section.
- Click Add section.
- Select Collage.
- Move the section to the desired position.
- Click Save when finished.
Configure the grid layout
Open the Collage grid section settings to control the main layout.
| Setting | Description |
|---|---|
| Grid columns | Sets the desktop grid system. You can choose between a 10-column or 12-column layout. |
| Row height | Controls the height of each grid row on desktop. |
| Row height mobile | Controls the row height on mobile devices. |
Use Grid columns together with each block’s Column size and Row size to create the final collage layout.
If the layout feels too compressed or too tall, adjust the Row height first, then adjust the block sizes.
Add image blocks
Use Image blocks when you want to display static visuals inside the collage.
In the Collage grid section, click Add block and select Image.
Configure the block settings:
| Setting | Description |
|---|---|
| Column size | Controls how many grid columns the block spans. |
| Row size | Controls how many grid rows the block spans. |
| Subheading | Adds small text above or below the heading. |
| Heading | Adds the main text overlay on the image. |
| Link | Makes the image block clickable. |
| Invert subheading and heading | Changes the order of the subheading and heading. |
| Image | Selects the main image. |
| Content position | Controls where the text appears on desktop. |
| Text alignment | Controls the text alignment on desktop. |
You can also add mobile-specific settings:
| Mobile setting | Description |
|---|---|
| Image mobile | Uses a separate image on mobile. |
| Content position mobile | Controls where the text appears on mobile. |
| Text alignment mobile | Controls the text alignment on mobile. |
Add video blocks
Use Video blocks when you want to display video content inside the collage.
In the Collage grid section, click Add block and select Video.
Configure the video settings:
| Setting | Description |
|---|---|
| Column size | Controls how many grid columns the video block spans. |
| Row size | Controls how many grid rows the video block spans. |
| Subheading | Adds small text above or below the heading. |
| Heading | Adds the main text overlay on the video. |
| Link | Makes the video block clickable. |
| Video | Selects a Shopify-hosted video. |
| Video URL | Adds an external video URL, such as YouTube or Vimeo. |
| Cover image | Sets the preview image before the video plays. |
| Description | Adds video description text for accessibility. |
| Enable video autoplay | Allows the video to play automatically. |
| Enable video looping | Allows the video to loop continuously. |
You can also set mobile-specific video content:
| Mobile setting | Description |
|---|---|
| Video mobile | Uses a separate Shopify-hosted video on mobile. |
| Video URL mobile | Uses a separate external video on mobile. |
| Cover image mobile | Uses a separate cover image on mobile. |
| Content position mobile | Controls where the text appears on mobile. |
| Text alignment mobile | Controls the text alignment on mobile. |
Add overlay text and links
Each image or video block can display text on top of the media.
Use these fields to create overlay content:
| Setting | Description |
|---|---|
| Subheading | Adds supporting text. |
| Heading | Adds the main text. |
| Link | Makes the block clickable. |
| Content position | Controls where the overlay content appears. |
| Text alignment | Controls how the text is aligned. |
If the block has a Link but no Heading, the whole block can still act as a clickable area.
Use highlighted text
The section and each block include highlighted text settings.
You can use these settings to style parts of the heading or subheading with visual effects.
Available highlight styles include:
- Text
- Full text
- Half text
- Underline
- Marker
- Stencil
- Scribble
When using the Scribble style, choose a scribble shape from the available options.
Configure colors and overlays
The section has color settings for the overall heading area, and each block has its own color settings for overlay content.
For each image or video block, you can adjust:
| Setting | Description |
|---|---|
| Text | Controls the overlay text color. |
| Highlight | Controls the highlighted text color. |
| Highlight gradient | Applies a gradient to highlighted text. |
| Overlay | Adds an overlay color on top of the media. |
| Overlay opacity | Controls the strength of the overlay. |
Image blocks also include hover settings:
| Hover setting | Description |
|---|---|
| Image hover | Shows a different image when hovering on desktop. |
| Text hover | Changes text color on hover. |
| Highlight hover | Changes highlight color on hover. |
| Overlay hover | Changes overlay color on hover. |
| Overlay opacity hover | Changes overlay strength on hover. |
Configure section heading and spacing
Use the heading settings to add content above the collage grid.
| Setting | Description |
|---|---|
| Heading | Adds the main section title. |
| Heading size | Controls the title size. |
| Heading alignment | Aligns the heading content. |
| Heading tag | Sets the HTML tag for the heading. |
| Subheading | Adds a small label above the heading. |
| Description | Adds supporting text below the heading. |
| Button label | Adds a button to the section heading. |
| Button link | Sets the button destination. |
| Open link in new window | Opens the button link in a new tab. |
| Show button icon | Displays an icon inside the button. |
Use the section settings to adjust spacing and container style.
| Setting | Description |
|---|---|
| Padding top | Adds spacing above the section. |
| Padding bottom | Adds spacing below the section. |
| Show section divider | Adds a divider line. |
| Make section full width | Makes the section span the full browser width. |
| Make section rounded | Adds rounded section corners. |
Troubleshooting
If the collage layout does not look correct, check the following:
- Make sure the section has at least one Image or Video block.
- Check the Grid columns setting and make sure the block Column size values fit your layout.
- Adjust Row height if the items look too short or too tall.
- Add a mobile image or mobile video if the desktop media does not crop well on mobile.
- Increase Overlay opacity if the text is difficult to read.
- Make sure a block has a Link if you want customers to click it.
- If a hover image does not appear, confirm that the Image hover field is filled in the Image block.
- If autoplay video does not play, check browser autoplay restrictions and make sure the video can play muted.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Blog Posts Section in Concept
How to Set Up the Image Comparison Section in Concept