The Image banner with products section makes it possible for you to add a section with your an image and multiple products. Perfect for a 'Shop the look' feel!
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Image banner with products', then click on 'Image banner with products'.
3) Done, your Image banner with products section is added.
General settings
The general settings contains the settings for the styling, layout and the setup of the 'Image banner with products' section.
Simply click on the 'section' to open the settings.
On the right sidebar, the following settings will show
Image:
The section says it all, its an image with products after all. Set your big images, for example a picture of a model with the full outfit.
Image overlay opacity:
Want to show an colored overlay over the image? Set the opacity here.
This comes in handy when you use text over the banner image to make it easier to read.
100% = full color
0% = no overlay
Color scheme:
Select the color scheme for the overlay + text colors. You can select the color pallets here.
Layout:
Change the layout of the section, you can select the big image on the left with products on the right, or the image on the right with products on the left.
Products:
Select the products you want to display beside the image banner.
Content position:
Set the position of the content within the image (text + button)
Heading:
This is where you will add your image banner heading and customize the heading fonts.
Text:
Write the text for your image banner, it will display below the heading.
Button:
The button will be displayed in image banner and you can use it to redirect customers to relevant collection or any link you want:
Mobile Layout
Banner width:
On the mobile version, would you like the image to stretch over the full width of the page or a boxed with.
The boxed with has whitespace at the left and the right of the image.
Banner height:
Set the height of the banner.
Bottom spacing desktop/mobile:
Set the spacing on the bottom for desktop and 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.