This procedure is intended for Page Designer administrators who want to create a banner carousel using Header Banner and Video Banner (Vimeo) components as individual slides.

Component Objective

The Carousel Wrapper Component is a nested container component used to create a carousel of banner slides.

The Carousel Wrapper itself provides the structure. Individual slides are created using existing Page Designer banner components.

The available slide components are:

• Header Banner
• Video Banner (Vimeo)

The basic structure is:

Carousel Wrapper

→ Slides
   → Header Banner
   → Video Banner (Vimeo)
   → Header Banner
   → Additional slides

Nested Component Structure

When the Carousel Wrapper is added to a page, it exposes a Slides area.

The administrator then adds the required banner components inside Slides.

The Carousel Wrapper does not replace or simplify the configuration of those banner components.

Each slide remains an individual:

• Header Banner, or
• Video Banner (Vimeo)

This is important because their normal properties remain available inside the carousel.

Header Banner Slides

A Header Banner added to the Carousel Wrapper retains its existing configuration options.

These include:

Layout Type

• Full: 1440 × 810 px
• Half: 1440 × 450 px
• Third: 1440 × 300 px

Content

The Header Banner provides:

• Content Alignment (Desktop)
• Content Position (Mobile)
• Content Box Background Color
• Text Alignment (Desktop)
• Content using the legacy rich-text editor
• Invert text color

Mobile Content Position

The available mobile treatments are:

• Overlay: content and CTA are displayed over the image.
• Below: content and CTA are displayed below the image.

When Below is used, Content Box Background Color can be configured for the mobile content area.

Available options are:

• Primary
• Secondary
• Pink
• Taupe

Image

The Header Banner uses an image corresponding to the selected banner format.

CTAs

Up to two optional CTAs can be configured.

Video Banner (Vimeo) Slides

A Video Banner (Vimeo) added to the Carousel Wrapper also retains its normal properties.

It follows the same general banner configuration as Header Banner while using Vimeo video content.

The component includes:

• Type
• Vimeo Video ID
• Content Alignment
• Content Position (Mobile)
• Content Box Background Color
• Content
• Text Alignment (Desktop)
• Invert text color
• Background overlay
• Up to two optional CTAs

The Vimeo rules remain unchanged.

Use the numeric Vimeo ID, not the complete Vimeo URL.

Teoxane uses a global Vimeo library. When a subsidiary requires a new Vimeo asset, it must liaise with HQ so that the video can be uploaded to the appropriate Vimeo library.

Mixing Image and Video Slides

Header Banner and Video Banner (Vimeo) slides can be used within the same Carousel Wrapper.

This makes it possible to create a carousel combining:

• Image banners
• Vimeo video banners

However, the fact that the two component types can be combined makes configuration consistency particularly important.

Keep the Same Banner Height Across Slides

Each banner retains its own Type setting.

Technically, this means individual slides can be configured with different banner sizes.

This should be avoided.

Once a banner height has been selected for the carousel, all slides should use the same height.

For example, if the carousel uses Third, all slides should use the corresponding Third format rather than mixing:

• Full
• Half
• Third

within the same carousel.

Changing height from one slide to another can negatively affect the carousel experience.

Keep Mobile Content Position Consistent

The same principle applies to Content Position (Mobile).

The available options are:

• Overlay
• Below

Once a mobile presentation has been selected for the carousel, use the same Content Position across all slides.

For example:

If Slide 1 uses Overlay, the other slides should also use Overlay.

If Slide 1 uses Below, the other slides should also use Below.

Avoid creating a carousel where one slide uses Overlay and the next uses Below.

The individual components technically allow this, but the resulting carousel experience will be inconsistent.

Slide Order

Slides can be dragged and dropped to change their order.

Administrators can therefore reorganize the sequence without rebuilding the individual Header Banner or Video Banner components.

For example:

Before

1. Header Banner A
2. Video Banner
3. Header Banner B

can be reordered to:

After

1. Header Banner B
2. Header Banner A
3. Video Banner

Use the order to control the sequence in which the carousel content is presented.

Targeting

The Carousel Wrapper supports the targeting possibilities associated with nested Page Designer structures.

Targeting can be applied at two different levels.

Carousel-Level Targeting

Apply targeting to the Carousel Wrapper when the complete carousel should follow the same conditions.

The targeting then applies to the carousel as a whole.

Slide-Level Targeting

Apply targeting to an individual Header Banner or Video Banner (Vimeo) when only that specific slide should follow particular conditions.

This allows different slides within the same carousel to be shown under different targeting conditions.

Targeting Individual Slides

Individual slides can therefore be prepared for particular audiences or conditions.

For example, a slide can be configured according to:

• Campaign or Promotion assignment
• Customer Groups
• Locales
• Display schedule

Schedules provide:

• Display From
• Display To

This makes it possible to control which individual slides are displayed without necessarily targeting the entire carousel.

Carousel-Level vs. Slide-Level Targeting

Choose the targeting level according to the requirement.

Target the Carousel Wrapper

Use when all slides should follow the same targeting.

Target Individual Slides

Use when only selected slides should follow particular targeting conditions.

This provides flexibility without requiring separate carousels simply because some slides have different visibility requirements.

Placement

The Carousel Wrapper can technically be used in different areas.

However, the strongly recommended placements are:

1. Main Region
2. Boxed Layout

Focus almost exclusively on these placements when building a carousel.

Banner components require sufficient space, and placing the Carousel Wrapper in more constrained structures can negatively affect the resulting presentation.

Carousel Wrapper vs. Card Carousel Wrapper

Do not confuse the Carousel Wrapper with the Card Carousel Wrapper.

They are different components with different child-component structures.

Carousel Wrapper

Uses:

• Header Banner
• Video Banner (Vimeo)

It is therefore a banner carousel.

Card Carousel Wrapper

Uses:

• Card Carousel Image
• Card Carousel Video
• Card Carousel Vimeo

It is therefore a media card carousel using Instagram-ratio assets.

Choose the Wrapper according to the type of carousel required.

Only Use the Supported Slide Components

The Carousel Wrapper's Slides area provides:

• Header Banner
• Video Banner (Vimeo)

Use these components to build the carousel.

Banner Properties Remain Unchanged

Adding a Header Banner or Video Banner (Vimeo) to a carousel does not create a simplified carousel-specific version of the component.

Their existing configuration options remain available.

Keep All Slides the Same Height

Do not mix different banner heights within the same carousel.

If a specific Type is selected for the carousel, use that same height across all slides.

Keep Mobile Content Position Consistent

Do not mix Overlay and Below mobile treatments within the same carousel.

Choose one presentation and apply it consistently across the slides.

Pay Particular Attention When Mixing Image and Video Banners

Header Banner and Video Banner (Vimeo) can coexist in the same carousel, but their settings should create a consistent overall experience.

Targeting Can Be Applied at Different Levels

Target the Carousel Wrapper when the complete carousel should follow the same conditions.

Target individual slides when only selected banners require specific conditions.

Prefer Main Region and Boxed Layout

Although other placements may technically be possible, focus almost exclusively on Main Region and Boxed Layout.

1. Determine Whether a Banner Carousel Is Required

Use the Carousel Wrapper when the page requires multiple banner experiences presented within one carousel.

Determine whether the slides will contain:

• Header Banners
• Video Banners (Vimeo)
• A combination of both

2. Decide on the Carousel Height

Before creating multiple slides, decide which banner Type the carousel will use.

Choose:

• Full: 1440 × 810 px
• Half: 1440 × 450 px
• Third: 1440 × 300 px

Once selected, use the same height for every slide in the carousel.

Do not configure each slide independently without considering the carousel as a whole.

3. Decide on the Mobile Content Position

Determine how the carousel should display its banner content on mobile.

Choose:

• Overlay
• Below

Use the same option across all slides.

If Below is selected, configure the appropriate Content Box Background Color on the individual banners.

4. Choose the Placement

Preferably add the Carousel Wrapper within:

• Main Region
• Boxed Layout

Avoid unnecessarily constrained placements.

5. Add the Carousel Wrapper

Locate the Carousel Wrapper Component in Page Designer.

Add it to the required location.

The Page Structure exposes a Slides area underneath the Wrapper.

6. Add the First Slide

Use the + control for Slides.

Choose either:

• Header Banner
• Video Banner (Vimeo)

The selected component is added as an individual carousel slide.

7. Configure a Header Banner Slide

When using Header Banner:

1. Select the agreed Type.
2. Configure Content Alignment (Desktop).
3. Configure the agreed Content Position (Mobile).
4. If using Below, configure Content Box Background Color.
5. Configure Text Alignment (Desktop).
6. Add the required Content.
7. Configure Invert text color where appropriate.
8. Select the required image.
9. Add Image alt where appropriate.
10. Configure up to two optional CTAs if required.
11. Click Apply.

Remember that the slide's Type and mobile Content Position should remain consistent with the other slides.

8. Configure a Video Banner (Vimeo) Slide

When using Video Banner (Vimeo):

1. Select the same agreed Type used by the carousel.
2. Enter the required numeric Vimeo ID.
3. Configure Content Alignment.
4. Configure the agreed Content Position (Mobile).
5. If using Below, configure Content Box Background Color.
6. Add the required Content.
7. Configure Text Alignment (Desktop).
8. Configure Invert text color where appropriate.
9. Use Background overlay where additional readability is required.
10. Configure up to two optional CTAs if required.
11. Click Apply.

Do not enter the complete Vimeo URL into Vimeo ID.

9. Add Additional Slides

Continue adding Header Banner and Video Banner (Vimeo) components under Slides according to the carousel requirements.

Configure each slide individually while maintaining the common carousel presentation rules.

10. Check Height Consistency

Review all slides.

Confirm that every Header Banner and Video Banner (Vimeo) uses the same banner height.

Do not leave a mixture such as:

Full → Third → Half

within the same carousel.

11. Check Mobile Consistency

Review Content Position (Mobile) for every slide.

Confirm that the carousel consistently uses:

Overlay → Overlay → Overlay

or:

Below → Below → Below

rather than mixing the two treatments.

12. Reorder the Slides

If the sequence needs to change, drag and drop the slides within the Carousel Wrapper.

Reorder them until they appear in the intended sequence.

The individual slide configuration remains attached to the slide while it is repositioned.

13. Decide Whether Targeting Is Required

Determine whether targeting should apply to:

• The complete carousel
• Selected individual slides

Choose the targeting level according to the content requirement.

14. Apply Carousel-Level Targeting

If the complete carousel should follow the same targeting:

Carousel Wrapper dropdown arrow → Targeting → Targeting window

Configure the required options:

• Campaign or Promotion → Assign
• Customer Groups
• Locales
• Schedules
• Display From
• Display To

Click Apply.

The targeting applies to the carousel as a whole.

15. Apply Slide-Level Targeting

If only a particular slide should follow specific targeting conditions, open Targeting on that individual Header Banner or Video Banner (Vimeo).

Configure the appropriate:

• Campaign or Promotion
• Customer Groups
• Locales
• Schedule

Click Apply.

Repeat only for the slides requiring their own targeting.

16. Review the Complete Carousel

Before completing the page, confirm that:

• The Carousel Wrapper is preferably in Main Region or Boxed Layout.
• Every slide is a Header Banner or Video Banner (Vimeo).
• All slides use the same height.
• All slides use the same mobile Content Position.
• Image and video banners work together as one consistent carousel.
• Slides appear in the intended order.
• Targeting is applied at the appropriate carousel or slide level.
• Individual banner content and CTAs are correctly configured.

17. Validate on Staging

Validate the completed carousel on the appropriate staging storefront.

Desktop / Tablet

Confirm that:

• All slides display at a consistent height.
• Header Banner and Video Banner slides transition without disrupting the overall carousel presentation.
• Text remains readable.
• Images and videos display appropriately.
• CTAs work as intended.
• Slides appear in the intended sequence.

Mobile

Confirm that:

• All slides use the intended Overlay or Below treatment.
• The mobile presentation remains consistent when moving between slides.
• Content remains readable.
• CTAs remain usable.
• No slide introduces an unexpected change in the carousel presentation.

Targeting

Where targeting is configured, confirm that:

• Carousel-level targeting affects the complete carousel as intended.
• Slide-level targeting affects only the intended slides.
• Scheduled or campaign-specific slides appear under the intended conditions.

The key principle is:

Treat the Carousel Wrapper as one coherent banner experience rather than a collection of independently designed banners. Header Banner and Video Banner (Vimeo) retain their normal properties, but all slides should share the same height and mobile presentation. Reorder slides through drag and drop, and use carousel-level or slide-level targeting according to how granular the visibility requirement needs to be.