Lorenza 3.0

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 Medium - vertical sections, you can create an asymmetrical layout::

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

Set up a collage section

STEPS

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

  2. Scroll down the list of home page and click the Add section button.

  3. Choose Collage from the list of sections.

    This opens the collage section settings.

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

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

  5. Choose whether to Enable animation for this section.

    This enables a zoom scroll effect. This effect adds a subtle zoom animation to the image as users scroll down the page.

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

    These all appear in the header area of the section.

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

    Either Left or Center.

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

  9. 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. For color settings that apply to the individual blocks, see the Add collage items section for more info.

  10. Return to the list of Home page sections to find your new Collage section.

Use the drag handles to rearrange the order of your Home page sections:

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

  1. Click Save.

Settings reference

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 subtle scroll zoom effect to each image in 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:

STEPS

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

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

Small: A square. The default size. It's half the width of the page.

Medium - vertical: Twice the height of a Small block.

Medium - horizontal: Twice the width of a Small block.

Large: Twice with width and height of a Small block.

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

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

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

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

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

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

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

  1. Repeat this process until you've added all the collage items you need.

    You can also use the Remove block button to remove a block from this section entirely.

  2. Click Save.

Settings reference

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 (1:1), Medium - vertical (1:2), Medium – horizontal(2:1), or Large(2:2).

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 Collage home page section allows you to add an auto-playing video instead of an image in its blocks.

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:

STEPS

  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.

  • Home page

  • Image with text

  • Image with text split

  • Gallery

  • Colors