Note that the layout of the collage changes depending on how many blocks you have added. See How collage layouts work for more details.
To set up a collage:
From your theme’s “Customize” screen, choose Home page from the pages drop-down menu at the top of the screen.
Scroll down the list of home page settings until you see the Add section button.
Choose Collage from the list of sections, and press the Add button.
This opens the collage settings.
Use the Add image button to add up to 5 image blocks to the collage.
See the Add collage blocks section of this article for more information about this step.
Change the color of the Overlay, all of the text (the Heading, Subheading, and Button text), as well as the Button background.
(Optional.) Choose whether to Enable full width.
Enabling this setting removes any borders around the section, letting it fill the entire width of the screen.
Once you have added all of the collage blocks you want, use the Back to settings (< ) button to go back to all of the home page settings again. Use the drag handles to rearrange the order of your home page sections:
Use the Save button in the top-right corner when you are finished editing.
You can style each collage content block with the following settings:
For each collage block you want to add:
Add an Image for the current block.
Some blocks may appear larger than others. For more information about collage layouts see How collage layouts work.
(Optional.) Add a Video link.
Your Image is used as a fallback for the video, if you’ve added a video link.
For more information about adding videos, see Add a video to a collage block.
Add Mini heading text and a Heading.
The mini heading is smaller text displayed above your heading. If you’re using the collage to highlight many different kinds of things, you could use the mini heading to distinguish between “Products”, “Collections”, “Blog posts” and so on. Or, you could choose to leave it blank.
Add Subheading text to be displayed below the heading.
You can choose how wide the subheading and heading can appear with the Text max width slider.
Add a Button link and Button text to be displayed as a call to action button on the collage block.
Choose the Text alignment for this content block.
There are lots of options. For more information about them, see Text alignment in collage blocks.
Tweak the Overlay opacity for this content block.
The overlay is a colored filter that is layered on top of your video and image. The opacity can be between 0% and 100%, where 0% is invisible and 100% is completely opaque.
Use the Back (<) button to go back to the collage section settings.
Each collage block has the following settings:
For more information, see Add a video to a collage section.
This text uses your Mini headings typography styles. See Typography for more information.
We recommend keeping this to just a few words long.
We recommend keeping this to a short sentence or two.
We recommend keeping this between 1 and 3 words.
For more information about each option, see Collage text alignment.
You can add up to 5 blocks per collage section. A collage with all 5 blocks enabled looks like this:
The section’s layout changes as you add more blocks. In the diagram below, you can see each possible configuration, and what size of each item would be:
Ira crops your uploaded images (from the center point of each image) so that they fit perfectly into the collage. To avoid unnecessary cropping, use our recommended image dimensions below as a guideline.
|Width||Height||Aspect ratio||Grid item|
|1440 pixels||864 pixels||3:2 (landscape)||1 of 1|
|1280 pixels||853 pixels||3:2 (landscape)||— |
1, 2 of 2
2, 3 of 3
2, 3 of 4
3, 4 of 5
|640 pixels||960 pixels||2:3 (portrait)||1 of 3 |
1, 4 of 4
2, 5 of 5
In the Collage home page section, you can change how text is aligned in each collage block.
The following Text alignment settings are available:
In the following diagram, you can see where the Top, Middle and Bottom style settings would place your text:
And in this diagram, you can see where the Split style settings would place your text:
The Collage home page section allows you to add auto-playing videos as blocks in the collage.
Before you start setting this up, you should know a few things:
To use Shopify to host this video file:
Go to the Shopify Files uploader screen in your Shopify dashboard.
Use the Upload files button to add a video file from your computer.
Once it has been uploaded, copy the URL next to the file.
It should look something like this: https://cdn.shopify.com/s/files/1/0074/8165/5349/files/my-video-filename.mp4.
Paste the link into the Video link field in the section settings.