Collage Media #1 - #2 - #3 - #4 - #5 - #6

by Admin on Aug 08, 2025

A Collage Media is a collection of images, text, or other visual elements arranged in a creative and visually appealing layout. This section in our theme supports this type of display, allowing you to add various types of content blocks and arrange them in a flexible layout. With a collage media section, you can showcase multiple elements in an artistic and engaging way, capturing the attention of your audience and conveying information effectively through visual storytelling.

1. Section Components

Section	Collage Media	Add a collection of images, text, or other visual elements in flexible layouts.
Available block	Image	Add image to the section.
	Video	Feature video on the section.
	Collection	Display a product collection in the section.
	Product	Highlight individual products in the layout.

2. Location & Setup

To add & set up the Collage Media section:

Open the Shopify Theme Editor (Online Store > Themes > Customize)
Decide where you want to place the new section in Template.
Click "Add Section".
Select "Collage Media (#number of variant)".

3. Highlight Features

Flexible content: Add various types of content like images, videos, products, or collections.
Freely layout control: Adjust size, rows, and columns for each block on desktop and mobile to build the perfect layout.
Pre-designed layout options: Choose from 6 available layout styles to match your store's vibe.

4. Common Use Cases

🤔 How to set up the Collage Media?

To set up the Collage Media section, please follow these steps:

STEP 1: Add and set up blocks

Under the Collage Media section, you can add blocks to incorporate various types of content. OT: Theme Section app supports four types of blocks:

Image block:

Select an Image from your library or free resources.
Adjust Overlay opacity and Overlay color for the image.
Enter the URL for the image link to redirect customers to your desired page.
Maintain the original aspect ratio of the image.

Video block:

Choose a Video from your store's data or embed the URL of a YouTube or Vimeo video.
(Optional) Toggle Enable video autoplay to make the video autoplay when scrolling through.
Tick the "Show sound control" checkbox to allow customers to toggle sound on or off as needed.

Product block:

Select a Product from your store to display in the section.
Select the Content alignment on the product card.
Change the Desktop size of the product card (Small, Medium, Large).

Collection block: Choose a Collection from your store to feature in the section.

STEP 2: Set up the section look.

Click on Collage Media section to open its settings panel. Then you can:

Enter the Heading of the collage section.
Adjust the size & choose the HTML tag for the heading.
Set the alignment of the heading (Left/Center/Right).
Add additional text below the main heading.
Enter Text for any supplementary information or description.
Adjust the Colors for section elements, such as background, heading, and text.

STEP 3: Click "Save" when done.

🤔 How to modify the height and width of the section and each block?

To modify the height and width of each block, follow these steps:

STEP 1: Click on Collage Media to open its settings panel

STEP 2: Adjust the layout settings

Click on the Collage Media section, scroll down to Desktop layout and Mobile layout setting group:

For Desktop layout:

Adjust the Number of columns displayed on desktop devices.
Set the spacing between blocks within the section.

For Mobile layout, the settings are similar to desktop layout, but the Number of columns is limited to 1-2 columns.

STEP 3: Customize the individual block settings

Click on the block that you want to adjust the height and width, then scroll down to the Layout setting group:

Choose the Number of columns wide to adjust the width of the block.
Select the Number of rows tall to adjust the height of the block.

STEP 4: Click "Save" when done.

🤔 How to customize Collection card and Product card on Collage Media?

With Collage Media, you have multiple settings to customize the look and function of Collection card and Product card.

STEP 1: Click on Collage Media to open its settings panel.

STEP 2: Customize Collection card

Scroll down to Collection card and toggle Show item count to display how many products the collection includes.

STEP 3: Customize Product card

Scroll down to Product card, and you have some main customization options:

Show vendor: Toggle to show or hide the vendor name.
Background color: Set the background color of the product card.
Title size: Adjust the product title's font size.
Desktop/Mobile padding: Control the spacing around the content.
Image ratio: Choose how product images are displayed (e.g. Natural, Square, etc.).
Image hover effect: Select an effect, such as "Hover to reveal second image."
Next/Previous arrows: Show navigation arrows for product view.
Auto-play: Set how often slides change automatically (in seconds).