The video with image section enables you to add a image banner with a video banner in one section, side by side! Awesome to showcase productvideo's of certain products!
Here's a quick sneak peek:
How to add this section:
To add an video with image section to your store;
Click on 'add section' which can be found in your left sidebar.
Scroll down, or search for 'Video with image', then click on 'Video with image'.
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:
Video with image
Width:
Choose the width of this section from boxed width or full width.
First banner width:
Set the width of the first banner, therefor you can make the second banner larger or smaller, depending on your needs.
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 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.
Show content on hover on banner image:
Check this option if you want the content to only show when the user hovers over the banner.
Color scheme on hover on banner images:
Control the color scheme on hover.
Banner height:
Set the height of the banner on mobile.
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.
Control the stacking order of sections:
Increase or decrease the z-index value to control the visual layering of sections, ensuring the desired display arrangement when using negative spacing.
When we increase the z-index, the section will overlap:
How to customize the Image banners and/or videos?
By default, there are 2 images/video 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 and video section after all. Set your images here.
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 color scheme:
Select the color scheme for the buttons within the banner.
Content position:
Set the position of the content within the banner.
Heading settings:
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.
Description:
Fill in the text of the banner, this will be the text within the banner underneath the title of the banner.
Button
Button label:
This text will show on the button, for example: 'View all'
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:
Set the position of the icon to left or right.
Show label:
Enable this to load in a label over the banner
Label text:
Set the text of the label. In the example below we've used: Hot this moment! 🔥
Enable custom text styling:
Custom text styling allows you to overwrite the standard typography settings. This way you can customize al your banners in a great and unique way! Enable the option and let your creativity go!
Mobile image:
Set the image for mobile, this setting is optional but great if your image looks good on desktop, but is cut off in 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.