Back to the index

Collage

The Collage home page section allows you to add a combination of small and large image blocks. This lets you add dynamic, magazine-style feature content to your home page.

Using a combination of Small and Large - vertical sections, you can create an asymmetrical layout:

Or, you can configure the image blocks to make any style of panel you like:

To set up a collage section

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 section settings.

4. Use the Add item button to add as many blocks to the collage as you want.

   For more information about item settings, See the Add collage items part of this article. You may want to come back to this part later.

5. Choose the Style for the section, either Default or Contrast.

   If you select Contrast, this section uses Lorenza’s contrast colors.

6. Choose whether to Enable animation for this section.

   This enables a parallax scrolling effect. This effect makes it look like the image is moving as customers scroll passed. You can clearly see this effect in action on a image with text section in the video below:

7. Add a Small heading, Heading, and Subheading.

   These all appear in the header area of the section.

8. Choose a Heading alignment for the heading, subheading, and button.

   Either Left or Center.

9. Choose a Max width of text, between 16 and 50.

   The text max width lets you control the shape of the text, and make it look good no matter how long your heading text is.

10. Tweak the collage colors using the Text color, Text container color, Button text color, and Button border color settings.

    These settings are used across all of the collage blocks you’ve added.

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

    

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

Settings

The collage section has the following settings:

Style

Choose a section style, either Default or Contrast. This affects the colors of the current section.

Enable animation

Add a parallax scrolling effect to the current section.

Small heading

Change the small heading text displayed above the main heading.

Heading

Change the heading displayed in the header area the section.

We recommend keeping this to just a few words long.

Subheading

Add subheading text.

We recommend a single, short paragraph.

Heading alignment

Change how the heading, subheading, and button text is aligned. Choose either Left or Center.

Max width of text

Using the slider, choose how wide the heading text should appear, at a maximum.

Text color

Change the color of all text across all of the collage blocks in the current section.

Text container color

Change the color of all text containers across all of the collage blocks in the current section.

Button text color

Change the color of the call to action button text across all of the collage blocks the current section.

Button border color

Change the color of the call to action button borders across all of the collage blocks the current section.

Add collage items

For each collage item you add, you’ll need to add an image or video and corresponding text content.

To add a collage item:

1. Make sure you are already editing the collage section you want to change.

2. Under Content, use the Add item button to add a new collage block.

3. Add an Image for the current block.

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

5. Choose a Block size for the current block.

   There are four options:

   Size	Description
   Small	A square. The default size. It’s half the width of the page.
   Large - vertical	Twice the length of a Small block.
   Large - horizontal	Twice the width of a Small block.
   Large	Twice with width and length of a small block.

6. Tweak the Overlay opacity and Overlay color.

   The overlay is a colored filter that is layered on top of your collage blocks.

   The opacity can be between 0 and 100, where 0 is invisible and 100 is completely opaque.

7. Add Small heading text and a Heading.

   The small heading is tiny 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 them blank.

   

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

9. Choose a Text position. Depending on your image, you may want to reposition the text as to not cover up something interesting in your image.

   Choose from Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, or Bottom right.

10. Choose a Max width of text, between 16 and 50.

    The text max width lets you control the shape of the text, and make it look good no matter how long your heading text is.

11. Add a Link and Button text to add a call to action button to the collage block.

12. Repeat this process until you’ve added all of the collage blocks you need.

    You can reorder the content blocks using the drag handles:

    

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

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, taking the place of the image.

For more information, see Add a video to a collage.

Block size

Choose a block size for the current collage block.

Choose one of Small, Large - vertical, Large – horizontal, or Large.

Overlay opacity

Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.

Overlay color

Pick the color of the overlay for the current image.

Max width of text

Using the slider, choose how wide the heading text should appear, at a maximum.

Link

Choose a link that the call to action button should lead to.

Button text

Add custom text for your call to action button.

We recommend keeping this between 1 and 3 words.

Add a video to a collage

The image with text home page section allows you to add an auto-playing video instead of an image.

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

• Home page
• Colors