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.
Button color scheme:
Select the color scheme for the button 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.
Image position:
Set the position of the image, what we mean by that is how the image will behave.
For example: The image is too big for the field, do you want the image to align in the center, set it to center center.
Content position:
Set the position of the content within the image (text + button)
Heading size:
Select the size of the heading from a range of small to extra large. When you choose for "Extra large", the size of the description will also be a bit larger than normal.
Heading:
Fill in the title of the section. Don't want to show a title? Simply leave the field empty!
Description:
Fill in the text for the section. Don't want to show a description? Simply leave the field empty!
Button label:
This text will show on the button, for example: 'Read more'
Link:
Enter a link for the button, for example to the products category page.
Show link instead of button:
Check this box if you don't want a button to show, but only a clickable text.
Products:
Click on select products and select the products you want to show besides the image.
You can select up to 6 products.
Quick buy:
Show on desktop:
If enabled, the quick buy button will show on desktop.
Show on mobile:
If enabled, the quick buy button will show on mobile.
Show amount selector:
If enabled, besides the quick buy button a amount selector field will show.
Enable compact button:
If enabled, the buy button will show in a compact styling.
Enable quick shop drawer:
If you want to enable the quick shop drawer (slide-out of a mini productpage) enable this option.
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.
Image position:
Set the position of the image, what we mean by that is how the image will behave.
For example: The image is too big for the field, do you want the image to align in the center, set it to center center.
Heading size:
This heading setting will determine the size of the section title on mobile.
Spacing
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.