Here is an amazing section that will help you design the Banners creatively and professionally with a collection.
Steps: In the theme editor (Customize) > Add section > Collection with banner > Save.
1. Collection with banner content
Click on Banner > ADD BLOCK > choose the block you want to add.
1.1. Banner item (Parent)
Each image represents for one banner. In this block, you can adjust your Banner with many options below:
Use custom height for many devices: Desktop, Tablet, Mobile
Add image item and config the image size, image position
Choose an effect when hover image and banner
Item width: choose different width for the banner.
Content align: You can align content to Left, Center or Right.
Content vertical/horizontal position: choose the position for the content inside.
Content padding: You can set the padding for Block content on desktop or mobile devices.
Background content, Border content: You can set color, opacity, style, padding for background and border content.
Please check this video to config content position:
1.2. Other blocks (Child)
You can add Text, Button, HTML, Image (child), Space HTML, Countdown, Custom label and config the style for them. You can refer to this video:
2. How to configure Collection with banner Section?
HEADING OPTIONS
You can enter the Heading and Subheading, choose the design for the heading, also can choose text align: center.
GENERAL OPTIONS
Collection position: Left or Right
PRODUCT ITEM AND OPTIONS IMAGE PRODUCTS
Choose design for product, enable vendor, countdown and config image ratio, size, position.
Maximum products to show and Items per row for desktop, tablet and mobile
Space horizontal/vertical items: You can set the space between items by horizontal/vertical. Moreover, you can choose different spaces for many devices: Desktop, Tablet, Mobile.
You can check this video to know more:
BOX OPTIONS
Layout design: You can choose Grid, Carousel or Masonry layout.
With Carousel layout, you can Enable loop, config Autoplay speed
Prev next buttons: enable them and change Visible, Button style, Button color, Button size, etc...
Page dots: enable and change some styles
You can check this video to know more:
DESIGN OPTIONS
Please follow this guideline to config Layout, Background, Margin/Padding for the section.
