Products multi carousel

General

Note: This section uses 3 the carousels by default

Content

Use the provided text fields to add a suitable subheading/heading/description. Leave any of them blank if you do not want to display them.

Section header

Show view all button: Display button view all in header block.

Layout header: Adjust content in the block for horizontal or vertical.

Header size: There are 3 styles to choose from: small/medium/large.

Alignment: Adjust content (left/center/right) relative to the container.

Show view all button at the bottom: Appears when Show view all button is enabled and Align selects center, move the view all button from the header block to below the carousel block.

Type: Appears when Show view all button is enabled and Align selects center, choose the button's display style.

Products

Collection: Select collection.

Items to show: Adjust the number of item max in carousel.

Items per row: Adjust the number of items displayed at the same time in the carousel.

Column gap: Adjust the distance between items in the carousel.

Banner settings

Show banner: Pops up when you want to display a banner.

Sticky banner: Turns on when you want the banner to be sticky when scrolling the page.

Width: Adjust width for banner block.

Position: Select banner block position left or right of section.

Banner type: Choose banner block to display as image or video.

Image: Select or upload an image for the banner.

Video URL/Local video: Choose between a video URL or a local video file to display. Note that if both are provided, the local video will take precedence.

Color scheme banner: Select color of banner block.

Vertical alignment: Align banner content vertically.

Content padding: Configure the padding for the content box.

Use the provided text fields to add a suitable heading/subheading/description/button. Leave any of them blank if do not want to display them.

Button link: Paste the link (URL) that will be redirected when clicked. You can paste the link directly or find the link in the list (product, collection, page, blog…).

Type: Choose a display style for the button: - Primary – The button stands out, the main color of the brand. - Outline – The border, softer.

Font-size: Adjust text size.

Font-weight: Choose the appropriate boldness for each type of content.

Uppercase: Convert all letters to uppercase.

Spacing bottom: Create space under each block.

Show next back: Displays arrow button next/previous in carousel that allow manual switching between slides.

Show next back in heading: Displays arrow button next/previous in heading block.

Dot: Chooses the type of pagination to display at the bottom of the slider.

Style dot: Selects the design style for the pagination dots.

Style next/back: Selects the design style for arrow button next/previous.

Infinite slide: Scrolling to the end will display the first slide.

Auto change slides: After a certain time, the slide will automatically change.

Change slides every: Configure the time interval for changing slides.

Reveal next slide: Allow a part of the next slide to be visible while the previous one is still displayed.

Mobile options

Items per row: Set the number of items displayed per row on mobile devices for optimal layout and usability.

Section padding: allows you to specify the space between this section and the preceding or following sections, or both.