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;
Click on 'add section' which can be found in your left sidebar.
Scroll down, or search for 'Image collage', then click on 'Image collage'.
Done, your Image collage section is added.
Section Settings:
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.
In the section settings you will find many options:Layout:
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.
Mobile Layout:
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.
How to customize the Image banners and modify the images & text?
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.
Each image banner has 2 headings: Primary and secondary in each banner you will see options to fill your desired headings and customize the font size for headings and choose the right font that works for you.
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.
Shop the look feature
With the "Shop the Look" feature, you can tag each banner within the Collage, linking it directly to the corresponding products in your Shopify store. Customers can simply hover click on the cart icon to view more details, including products variants, their prices, and the option to add them to their cart. This streamlined process eliminates the need for customers to manually search for each item separately, providing a seamless and efficient shopping experience.
Products: You can select upto 12 products to show in the shop the look box.
Color scheme: You can change the icon color scheme using the option.
Position: And position it from left to right.
You can also add a label over image:
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.