Hero banner

Section settings

General settings

Section width: Can choose among Default, Fluid Container, Stretch width, Full width for the section layout.

Color scheme: You are allowed to change text color, background color, etc. with preset color.

Heading settings

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

Description: Adjust the text alignment (left/center/right) along with the background color and container type.

Carousel settings

Show next back: Display arrows to navigate to the next or previous item.

Dot: Display dot to navigate to the next or previous item.

Style dot: Select the dot display style

Infinite slide: Carousel will run continuously, last slide transitions to first slide

Auto change slides: Slide automatically advance after a period of time.

Change slides every: Set auto-slide time.

Column gap: Adjust the space between image and content when viewing on desktop.

Gap tablet: Adjust the space between image and content when viewing on tablet.

Gap mobile: Adjust the space between image and content when viewing on mobile.

Section padding settings

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

Block settings

Image

Image/Mobile image: Select or upload an image for the banner on both desktop and mobile views.

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…).

Content

Use the provided text fields to add a suitable subheading/heading/description/first button label/second button label. Leave any of them blank if you 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 - Link – Display as a link, no background, no frame

Content alignment vertical: Adjust the vertical position of the content within the display frame.

Spacing top: Add space above the content.

Spacing bottom: Add space below the content.

Image padding left/right: Adds space on the left/right sides of the image. Helps keep the image from being too close to the edge, suitable for light backgrounds or images with content close to the edge.

Content padding left/right: Add left/right spacing to the content.

Width: Adjust the width of the content by percentage.

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.