Back to the index

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:

1. From your theme’s “Customize” screen, choose Home page from the pages drop-down menu at the top of the screen.

   

2. Scroll down the list of home page settings until you see the Add section button.

   

3. Choose Collage from the list of sections, and press the Add button.

   This opens the collage settings.

4. 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.

5. Change the color of the Overlay, all of the text (the Heading, Subheading, and Button text), as well as the Button background.

6. (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.

7. 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:

   

8. Use the Save button in the top-right corner when you are finished editing.

Settings

You can style each collage content block with the following settings:

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:

1. 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.

2. (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.

3. 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.

   

4. Add Subheading text to be displayed below the heading.

5. You can choose how wide the subheading and heading can appear with the Text max width slider.

6. Add a Button link and Button text to be displayed as a call to action button on the collage block.

7. Choose the Text alignment for this content block.

   There are lots of options. For more information about them, see Text alignment in collage blocks.

8. 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.

9. Use the Back (<) button to go back to the collage section settings.

Settings

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.

Collage layouts

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

Collage text alignment

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.

Host the video file with Shopify

To use Shopify to host this video file:

1. Go to the Shopify Files uploader screen in your Shopify dashboard.

2. Use the Upload files button to add a video file from your computer.

3. 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.

4. Paste the link into the Video link field in the section settings.

Related articles

• Typography