Hero Carousel

Updated 1 month ago

It is basically a rotating banner that showcases multiple promotions, collections, or messages. You can use it  at the top of your homepage to highlight key campaigns or categories. 

Image Attribute
These settings control how each slide image appears.

  • Ratio - Sets the shape of the image area (like wide, square, tall).

  • Radius - Controls how rounded the image corners are.

  • Image Scale - Decides whether the image fills the entire area or fits within it.

Transitions
Controls how the carousel slides change.

  • Style - Choose if the carousel shows pause controls or navigational dots.

  • Color - Controls the color of the controls (dots or pause icon).

  • Autoplay Time - Sets how long each slide stays before switching automatically.

  • Position - Changes where the dots appear.

Layout Padding and Position
Adjusts the spacing and vertical placement of the whole carousel.

  • Padding - Controls the inner spacing around the carousel.

  • Vertical Position - Shifts the carousel up or down within its section.

Background and Spacing
Controls the outer wrapper around the entire hero carousel.

  • Color - Sets the background color behind the carousel.

  • Radius - Rounds the corners of the carousel section.

  • Padding - Adds inner spacing for the section.

  • Margin - Controls spacing outside the section.

Border
Customize the outline around the section.
 • Color — the border color
 • Width — thickness
 • Sides — choose which sides show the border

When you open the content section, you can customize each collection individually. 

For each collection, you can make the following changes:

  • Upload Image - Choose or upload the image you want to display for that collection.

  • Target Page - Decide where it should redirect users.

  • Select Collection - Pick the specific collection you want to showcase.

  • Overlay - Decide a percentage of overlay you want to display on the image

Text content for both heading and subheading - 

For content inside the image, you can make the following changes in heading as well as subheadings. You can also click on the eye button to decide if you want to enable or disable this.

  • text

  • font, 

  • size/weight

  • line height

  • letter spacing

  • text color

  • alignment

  • capitalization

Primary button and Secondary button -

You can make the following changes in the primary and secondary button. You can also click on the eye button to decide if you want to enable or disable this.

  • Text style

  • Border

  • Left icon

  • Right icon

For button settings, you have the option to customize its radius, padding, relation, format and position of the button.

Benefits:

  • Maximizes prime screen space

  • Allows showcasing multiple offers without clutter

  • Improves engagement with visual storytelling

Related Articles

Announcement bar

1 min read

Button

2 min read

Image Block

1 min read

Image Banner

1 min read