The Image collage section makes it possible for you to add a nice banner/ image collage section anywhere within your theme. Here's an example:

To add an image collage section to your store;

The general settings contain the settings for the styling and layout of the Image collage section. Simply click on the 'section' to open the settings.

Under the layout option you can select if you would like to mirror the image banners. What more you can adjust the width of the section whether it will be boxed or fullwidth.

After selecting the width you will move forward to select height for your section, (note: it will change the height for all banners inside the Image Collage section). Default height options are Small, Medium and Large. All these options are responsive which means no matter the height you select it will be perfect.

If you wanna go with custom height just enable custom minimal height option and use range slider to adjust the section height.

Space between banners defines the gap between the image banners inside the image collage section, you can customize it using the range slider.

Show zoom effect on hover on banner images: You can choose to enable a zoom effect for the banner images. This effect will be shown when you hover over the banner with your mouse.

Show move animation on hover on banners: You can choose to enable a move animation for the banners. This effect will be shown when you hover over the banner with your mouse and causes the banner to move up a little. Note that the move animation will be disabled when 'space between banners' is set to less than 10, because in that case there is not enough space for the animation to show flawlessly.

That conclude the general layout settings but everyone like responsive themes so you have an option to display things a little different on mobile so we have mobile layout options.

Layout:

Choose the layout for the banners on mobile, would you like the image to show in rows or in a slider?
​
​Banner height:

This setting will determine the height of the banners on mobile

Spacing
​
Bottom spacing desktop/mobile: That way you will get the amount of whitespace below the element you want. The default for desktop is 70px and the default for mobile is 40px.

By default, there are 2 images banners added, you can edit them, remove them or add more.

1. Editing the image banners: To edit the blocks you simply click on the block you want to edit in your sidebar on the left of your screen.

After you clicked the block, on the right of your screen the following sidebar will open.

Image: The section says it all, its an image gallery after all. Set your images here, for example a nice banner for a sale.

Video: Instead of an image, you can also choose to show an inline video. This will override the image setting.

Image/video overlay opacity: Want to show a colored overlay over the image/video? Set the opacity here. This comes in handy when you use text over the banner image/video to make it easier to read.100% = full color0% = no overlay

Color scheme: Select the color scheme for the content + button. You can also change the content position.

Heading size:

Select the size of the heading from a range of small to extra large.

Enable custom styling:
You can enable this checkbox to overwrite the heading color scheme and font weight.

Heading font:

Choose the font family for your headings.

Below headings you can add description for the banners also.

Button label:

This text will show on the button, for example: 'Shop now'
​

Link:

Enter a link for the button, for example to your products sale page.
​

Show link instead of button:

Check this box if you don't want a button to show, but only a clickable text.

Additionally you're also able to upload a different image on mobile:
​

I hope this documentation is useful to you. If you have any questions feel free to click on the chat icon and send us a message.