Hero Banner

The Hero Banner is the large banner at the top of the homepage. Use it for your main collection, sale, festive offer, or brand message.

It can show one slide or many slides.

Add a Hero Banner

  1. Go to Content -> Homepage Configurator -> Sections.
  2. Click Add New Section.
  3. Enter a Title, for example Hero Banner.
  4. Set Section Type to Hero Banner.
  5. Set Enabled to Yes.
  6. Use a low Sort Order, such as 10, so it shows first.
  7. Fill the Hero Banner Configuration fields.
  8. Click Save.

Magento Admin Edit Section page for Hero Banner

SettingWhat it does
AutoplaySlides change automatically.
Autoplay Speed (ms)Time before the next slide shows. Example: 5000 means 5 seconds.
Navigation DotsShows small dots so shoppers can see how many slides are available.
Navigation ArrowsShows previous and next arrows.
Arrows PositionChoose where the arrows show on the banner.
Default Text ColorText color used on the banner. White works well on dark images.

Magento Admin Hero Banner configuration settings

Add slides

Click Add Slide for each banner slide.

Slide fieldWhat to enter
Slide ImageUpload a clear banner image. Recommended size is 1920 x 600 px. Maximum file size is 4 MB.
Background VideoOptional. Use only if you have a light MP4 video. Keep a slide image as the fallback.
HeadingMain text on the banner. Keep it short.
DescriptionSmall supporting text.
Button 1 Text / LinkMain button, such as Shop Now.
Button 2 Text / LinkSecond button, if needed.
Content PositionChoose where the text shows on the banner.
Text AlignmentChoose Left, Center, or Right.

Magento Admin Hero Banner slide fields

Video slide: You can also add a video in a slide. Add the MP4 path in Background Video and keep a Slide Image uploaded. The image is used if the video cannot load.

Storefront result

Magento 2 Hyva Jewellery Theme hero banner on the storefront

Good practice

  • Use 1 to 3 slides. Too many slides can distract shoppers.
  • Keep the heading easy to read.
  • Do not place important text inside the image. Use the Heading and Description fields instead.
  • Check the banner on mobile after saving.
  • If the text is hard to read, use a darker image or change the text color.