Homepage Hero

Use the Homepage Hero (Swiper) section to create a large homepage carousel with campaign images, optional background video, promotional text, and featured product information.

Before you start

Prepare a desktop poster for every slide. You can also prepare a mobile poster, MP4 or WebM video, campaign text, a link, and a published WooCommerce product.

Open the Home V2 page

1. In the WordPress dashboard, select Pages > All Pages.
2. Find the page marked Front Page and select Edit.
3. Confirm that Template is set to Home V2.
4. Scroll to the [page] - Home V2 panel.

Add the new hero section

1. In Sections, select Add Section.
2. Choose Homepage Hero (Swiper).
3. Drag the new section to the position where it should appear. The hero is normally the first section on the page.

Configure the carousel

Set the options that apply to the whole hero:

Field	What to enter or choose
Accessible Label	Optional description announced by screen readers. If left empty, the website uses “Featured products and promotions”.
Enable Autoplay	Turn on to move through multiple slides automatically. Visitors can pause and restart the slideshow.
Autoplay Delay (ms)	Time before the next slide appears. The default is 6000 milliseconds, or 6 seconds. Use a value from 3000 to 30000.
Show Wave Background	Turn on to show the decorative wave along the bottom of the hero.

tip

Leave enough time for visitors to read each slide. Start with 6000 milliseconds and increase it when a slide contains more text.

Add a slide

1. In Slides, select Add Row.
2. Open the Media tab.
3. In Desktop Poster, select the main image. This field is required and is also used while a video loads or cannot play.
4. In Mobile Poster, optionally select an image designed for smaller screens. If left empty, the desktop poster is used.
5. In MP4 Video and WebM Video, optionally select self-hosted background video files.
6. Set Overlay Opacity to improve the contrast between the media and text.

warning

Always add a suitable Desktop Poster, even when the slide uses video. Mobile devices and data-saving browsers may show the poster instead of playing the video.

Add slide text and a link

1. Open the Content tab.
2. Choose Light or Dark under Text Theme so the text contrasts with the poster or video.
3. Choose where the content appears under Content Position:
   • Top left
   • Top center
   • Center
   • Bottom left
   • Bottom right
4. Enter the required Title.
5. Enter an optional Subtitle.
6. In CTA, optionally enter the button label and destination link.

Add an optional product card

1. Open the Product tab.
2. In Product, search for and select a published WooCommerce product.
3. In Product CTA Label, optionally replace the default View product link text.

The product card uses the product's current name, price, sale state, stock availability, and product-page link. Update that information in the product editor when it is incorrect.

Add more slides

1. Select Add Row for each additional slide.
2. Complete the required Desktop Poster and Title fields.
3. Drag the slide rows into the order customers should see them.
4. Review the text theme and overlay for each slide separately.

Enable and publish the new hero

warning

Enabling the new hero changes the live homepage after you select Update. Review all slides before switching it on.

1. At the top of the [page] - Home V2 panel, turn on Use New Homepage Hero.
2. Select Update.
3. Open the homepage in a private browser window.
4. Check the desktop and mobile posters, text contrast, links, product details, slide controls, and video fallback.

When Use New Homepage Hero is on, the website shows Homepage Hero (Swiper) and hides the legacy Promo / Hero Banner.

Return to the legacy banner

1. Edit the Home V2 page.
2. Turn off Use New Homepage Hero.
3. Select Update.
4. Open the homepage and confirm that the Promo / Hero Banner is visible again.

The new hero and legacy promo content remain saved in Sections, allowing you to switch between them without rebuilding either section.