We've added some cool new sections in Xclusive to make your Shopify store look good and modern. Animated image columns enable you to add image banners with cool animations making your store more interactive.
Here's a quick sneak peek:
How to add this section:
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.
General Settings:
The general section contain the settings for layout and spacing. To open the general settings click on the section:
Number of columns: Control the number of image banners showing in a row, by default it is set to 2 columns.
Width: Choose the width of this section from boxed width or full width.
Banner height: Control the height of the section from Small, medium and Large. If you want a custom height check the custom minimal height box and adjust the range slider to increase the height.
Space between banners: Control the gap between the banners;
Show zoom effect on hover on banner images: Check this option to have zoom effect on hover over the banner.
Show move animation on hover on banner: Check this option to have move animation on hover. Not applicable when 'Space between banners' is less than 10px.
Color scheme: Control the color scheme on hover.
Layout: Choose mobile layout that suits you best, if you want a slider layout select Swipe or select rows if you want to display the banners in rows.
Bottom spacing desktop/mobile: That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.
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.