This procedure is intended for Page Designer administrators who need to create a configurable image banner combining visual content, text and optional CTAs.

The Header Banner provides more layout and responsive configuration options than simpler media components such as Full Width Image with Text.

Component Objective

The Header Banner Component allows administrators to combine:

• A banner image
• Text content
• Up to two optional CTAs

The component provides several configuration options for controlling the banner proportions, content alignment and mobile behavior.

It can be used in a wide variety of Page Designer layouts, provided that sufficient space is available for the selected banner format.

Layout Options and Image Dimensions

The Header Banner provides three Type options:

Type	Image dimensions
Full	1440 × 810 px
Half	1440 × 450 px
Third	1440 × 300 px

The width remains 1440 px for all three formats.

The height changes according to the selected Type.

This allows administrators to choose the banner proportions that best fit the intended page design.

Full

1440 × 810 px

Use the Full format when the design calls for the tallest of the three available banner formats.

Half

1440 × 450 px

Use the Half format when a shorter banner is required.

Third

1440 × 300 px

Use the Third format for the most compact banner format available within the component.

The image selected for the component should correspond to the ratio of the selected banner Type.

Content Alignment on Desktop

The Content Alignment (Desktop) setting controls the positioning of the content block on desktop.

The available options are:

• Left
• Center
• Right

Select the alignment according to the selected image and intended composition.

Content Position on Mobile

The Content Position (Mobile) setting controls how the text and CTAs are positioned relative to the image on mobile.

This is a mobile-specific setting.

Two behaviors are available:

Overlay

When Overlay is selected, the text and CTAs remain positioned over the image.

Below

When Below is selected, the text and CTAs are moved below the image on mobile.

This provides an important responsive design option when overlaying the content on the image would not produce an effective mobile presentation.

This Overlay/Below setting applies to mobile only. There is no equivalent setting for desktop.

Content Box Background Color

The Content Box Background Color becomes relevant when the mobile Content Position is set to Below.

When the content sits below the image, administrators can select a background color for that content area.

The available options include:

• Primary: Teoxane purple
• Secondary: another shade of purple
• Pink
• Taupe

This background-color treatment applies to the mobile below-image content area.

The background should be selected with the text color in mind to ensure sufficient contrast and readability.

Text Alignment

The Text Alignment (Desktop) setting provides the available text-alignment options:

• Left
• Center
• Right

This alignment setting applies to the content as a formatting rule and overrides alignment that may otherwise have been applied within the text content itself.

Administrators should therefore use the component's alignment setting to determine the intended alignment rather than relying on formatting entered inside the Content field.

Content

The Content field contains the text displayed within the Header Banner.

It uses the legacy text-editing approach.

This is an important distinction.

The Header Banner does not provide the enhanced formatting freedom available in Textbox Plus.

Textbox Plus remains the dedicated text element providing the highest level of granular text-formatting control.

As with other Page Designer components containing embedded text fields, administrators should expect the more constrained legacy text-editing experience.

Invert Text Color

The Invert text color option changes the text to white.

This applies regardless of device.

When enabled:

Desktop text → White

Mobile text → White

This option is particularly useful when the default text color does not provide sufficient contrast against the selected image.

It also requires additional consideration when Content Position (Mobile) = Below.

In that configuration, the mobile text will appear against the selected Content Box Background Color.

If Invert Text Color is enabled, select a mobile background color that provides sufficient contrast with white text.

Image

The Image field is required.

Select an image corresponding to the proportions of the selected banner Type:

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

The image composition should also take the selected desktop Content Alignment into consideration.

Image Alt

Use Image alt to provide the appropriate alternative text for the selected image.

Optional CTAs

The Header Banner supports up to two optional CTAs.

Administrators can therefore configure the banner with:

• No CTA
• One CTA
• Two CTAs

The component provides separate sections for:

• First Button
• Second Button

Each CTA follows the standard CTA configuration and includes:

• Text
• Link
• Style

Use only the number of CTAs required for the banner.

Placement and Compatibility

The Header Banner can be used almost anywhere within the available Page Designer layouts.

It is not restricted to one specific region or container.

However, common sense should guide placement.

The component relies on a wide banner image and needs sufficient space for:

• The visual
• The text
• Up to two CTAs

Even if a particular layout technically accepts the component, avoid squeezing the Header Banner into an excessively narrow area where the image or content becomes difficult to read.

The selected banner Type should also be considered when determining whether the available area is appropriate.

Technical compatibility does not automatically mean that a placement is visually appropriate.

Versatility

The Header Banner is a versatile media component because administrators can control several aspects of its presentation:

• Banner proportions
• Desktop content alignment
• Mobile content position
• Mobile below-image background color
• Text alignment
• Text contrast
• Image
• Zero, one or two CTAs

The ability to configure mobile behavior separately is particularly useful when the desktop composition does not translate effectively to a smaller screen.

Pairing With Other Components

The Header Banner can be considered standalone.

It already provides:

• Visual content
• Text
• Optional navigation through one or two CTAs

It can nevertheless be combined with other components as part of a larger page composition.

Select the Correct Image Dimensions

The three banner Types use different image proportions.

Type	Required target dimensions
Full	1440 × 810 px
Half	1440 × 450 px
Third	1440 × 300 px

Prepare the image according to the selected Type.

Mobile Content Position Does Not Apply to Desktop

Overlay and Below control mobile behavior only.

Do not expect this setting to reposition the content below the image on desktop.

Content Box Background Color Is for the Mobile Below Configuration

The Content Box Background Color is relevant when the mobile content is positioned Below the image.

Do not treat this as a general banner background-color control.

Invert Text Color Applies Across Devices

When Invert text color is enabled, the text becomes white on both desktop and mobile.

If mobile Content Position is set to Below, consider the selected Content Box Background Color carefully.

White text must remain readable against that background.

Component Alignment Overrides Text Formatting

Use the component's alignment settings to control the intended alignment.

Do not rely on formatting within the legacy Content field to contradict the component-level alignment setting.

Content Uses Legacy Text Formatting

The Header Banner does not provide the advanced text-formatting capabilities of Textbox Plus.

Do not assume that text inside the Header Banner can be formatted with the same level of freedom as a standalone Textbox Plus.

Do Not Over-Constrain the Banner

Although the Header Banner can be used almost anywhere, use common sense.

Avoid placing it in a space that is too narrow for the selected banner format to remain visually effective and readable.

1. Determine the Role of the Banner

Before configuring the component, determine what the Header Banner needs to communicate.

Identify:

• The visual
• The text
• Whether navigation is required
• Whether one or two CTAs are required
• The appropriate banner proportions

2. Choose an Appropriate Placement

Determine where the Header Banner should appear within the page.

The component can be used across a wide range of Page Designer layouts.

Use common sense and ensure that the selected location provides sufficient space.

3. Add the Header Banner Component

Locate Header Banner in the Page Designer component list.

Drag and drop it into the required location.

Open the component configuration.

4. Select the Layout Type

Under Layout, locate the required Type field.

Select:

• Full
• Half
• Third

The selection determines the banner proportions.

5. Prepare the Image According to the Selected Type

Use the appropriate dimensions:

Full → 1440 × 810 px

Half → 1440 × 450 px

Third → 1440 × 300 px

Ensure that the visual composition works with the selected proportions.

6. Configure Content Alignment on Desktop

Locate Content Alignment (Desktop).

Select:

• Left
• Center
• Right

Choose the position according to the image composition and intended design.

7. Configure the Mobile Content Position

Locate Content Position (Mobile).

Select either:

Overlay if the text and CTAs should remain over the image on mobile.

or

Below if the text and CTAs should move underneath the image on mobile.

Remember that this setting affects mobile only.

8. Configure the Mobile Content Box Background Color When Required

If Below has been selected for the mobile Content Position, configure Content Box Background Color.

Choose from the available options:

• Primary
• Secondary
• Pink
• Taupe

Select a background that works with the intended text color.

9. Configure Text Alignment

Locate Text Alignment (Desktop).

Select:

• Left
• Center
• Right

Remember that this component-level setting controls the alignment of the content and overrides formatting applied within the Content field.

10. Enter the Content

Locate the required Content field.

Enter and format the banner copy using the available legacy rich-text controls.

Remember that this field does not provide Textbox Plus formatting capabilities.

11. Configure Invert Text Color

Review the text against the selected image.

Enable Invert text color when white text provides better contrast.

If mobile Content Position is Below, also check that white text works with the selected Content Box Background Color.

The setting applies to both desktop and mobile.

12. Select the Image

Locate the required Image field.

Select the visual prepared for the chosen banner Type.

Confirm that the visual works with:

• The selected proportions
• Desktop content alignment
• Text alignment
• Text color
• CTA placement where applicable

13. Configure Image Alt

Complete the Image alt field with appropriate alternative text for the selected visual.

14. Decide How Many CTAs Are Required

Determine whether the banner requires:

• No CTA
• One CTA
• Two CTAs

Do not add buttons when the banner does not require visitor navigation.

15. Configure the First Button if Required

Under First Button, configure:

• Text
• Link
• Style

The CTA follows the standard Page Designer CTA behavior.

16. Configure the Second Button if Required

If a second CTA is required, configure the Second Button using:

• Text
• Link
• Style

If only one CTA is required, leave the second CTA unused.

17. Review the Complete Configuration

Before saving, confirm that:

• The correct Layout Type is selected.
• The image uses the appropriate dimensions.
• Desktop Content Alignment is correct.
• Mobile Content Position is correct.
• If Below is selected, the mobile Content Box Background Color is appropriate.
• Text Alignment is correct.
• Content is correct.
• Text formatting is appropriate within the available legacy controls.
• Invert Text Color is configured appropriately.
• Image alt is completed.
• The correct number of CTAs has been configured.
• CTA text, links and styles are correct.
• The component has sufficient space within the selected Page Designer layout.

18. Click Apply

Once the configuration is complete, click Apply to save the Header Banner Component.

19. Validate the Header Banner on Staging

Validate the completed banner on the appropriate staging storefront.

On desktop, confirm that:

• The selected Full, Half or Third proportions render correctly.
• The image displays correctly.
• The content appears in the intended left, center or right position.
• Text alignment is correct.
• Text remains readable against the image.
• White text displays correctly when Invert Text Color is enabled.
• One or two CTAs display correctly where configured.
• CTA destinations work correctly.

On mobile, confirm that:

• The image displays correctly.
• Overlay keeps the content over the image when selected.
• Below moves the content underneath the image when selected.
• The selected Content Box Background Color displays correctly when the content is below.
• Text remains readable against either the image or selected background.
• Invert Text Color produces white text when enabled.
• CTAs remain visible and usable.

Finally, confirm that the Header Banner has sufficient space within its chosen layout.

The component can be used almost anywhere, but if the selected placement compromises readability, image composition or usability, choose a more appropriate placement rather than forcing the banner into an overly constrained space.