Collage
The Collage home page section allows you to add up to 5 blocks of images with text and call to action buttons. You can even add videos in place of images.
Note that the layout of the collage changes depending on how many blocks you have added. See How collage layouts work for more details.
Add a collage to the home page
To set up a collage:
Settings reference
The following settings apply to every collage content block:
Overlay
Pick the overlay color. The overlay is a filter on top of your images. The primary purpose is to make your text easier to read.
Heading
Pick the color of the heading.
Subheading
Pick the color of the subheading text.
Button background
Pick the button background color.
Button text
Pick the button text color.
Enable full width
Check this checkbox to remove the outer margins from this section, making it span the entire width of the screen.
Add collage blocks
For each collage block you want to add:
Select 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.
Return to the list of Home page sections to find your Collage section with the content blocks nested below.
You can change the order of the blocks by using the drag handles:
Repeat this process until you've added all the Collage images you need.
You can also use the Remove block button to remove a block from this section entirely.
Click Save.
Settings reference
Each collage block has the following settings:
Image
Add or upload an image for the current collage block.
Video link
Paste a link to an MP4 file that should be auto-played in the collage block, taking the place of the image.
For more information, see Add a video to a collage section.
Mini heading
Add a mini heading, which is smaller text placed above the heading.
This text uses your Mini headings typography styles. See Typography for more information.
Heading
Add heading text to be used above the list of featured products.
We recommend keeping this to just a few words long.
Subheading
Add subheading text to be displayed below the heading text.
We recommend keeping this to a short sentence or two.
Text max width
Change how wide the heading and subheading text can be at a maximum.
Button text
Add custom text for your call to action button.
We recommend keeping this between 1 and 3 words.
Button link
Choose a link that the call to action button should lead to.
Text alignment
Choose how the text inside the current collage block should be aligned.
For more information about each option, see Collage text alignment.
Overlay opacity
Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.
Settings reference
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::
Avoid cropping
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 |
Settings reference
In the Collage home page section, you can change how text is aligned in each collage block.
The following Text alignment settings are available:
| Top left | Top center | Top right |
|---|---|---|
Middle left | Middle center | Middle right |
Bottom left | Bottom center | Bottom right |
Split left | Split center | Split right |
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::
Add a video to a collage section
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:
✓ You'll need your video as an MP4 video file.
✓ For the best customer experience, we strongly recommend using a 20- to 30-second video that's under 10MB in size.
✗ You can't use a service like YouTube or Vimeo to host this video. Our Video section is designed for those.
Host the video file with Shopify
To use Shopify to host this video file: