This procedure is intended for Page Designer administrators who need to highlight a small collection of important figures or statistics in a clear and visually structured format.

The Key Figures Component is designed for information that visitors should be able to understand quickly.

Component Objective

The Key Figures Component presents up to five key figures, each accompanied by a short supporting label.

The component can also include:

• A Header
• A Subheader
• Up to 5 Key Figures

Each Key Figure contains:

• Value
• Label

The component provides a predefined visual presentation with limited layout freedom. Administrators provide the content, while the component controls how the figures are arranged.

Content Structure

Header

The Header can introduce the overall subject represented by the figures.

It uses the legacy rich-text editing experience.

Subheader

The Subheader can provide additional context for the collection of figures.

It also uses the legacy rich-text editing experience.

Key Figures

Up to five Key Figures can be configured.

Each Key Figure contains two fields:

Value

The Value contains the figure being highlighted.

Label

The Label provides the short explanation or context associated with that Value.

Both fields use the legacy rich-text editing experience.

Keep the Content Concise

The component is called Key Figures for a reason.

The information accompanying each figure should be short, direct and immediately understandable.

The component is designed to communicate important information at a glance, not to accommodate long explanations.

A Key Figure should therefore follow a simple principle:

Value → concise supporting Label

Avoid turning the Label into a paragraph or using the component to tell a detailed story.

If substantial explanation is required, use another appropriate content component to provide that information.

Number of Key Figures

The component supports up to five Key Figures.

Each available Key Figure follows the same structure:

1. Value
2. Label

The component then handles the visual presentation of the configured figures.

Desktop Presentation

On desktop, the Key Figures are presented together on one row.

The layout is predefined by the component.

Administrators should therefore think about the figures as a collection rather than attempting to create individual custom layouts for each one.

Mobile Presentation

On mobile, the figures reorganize into a two-column-style layout, with the figures flowing across multiple rows as required.

The responsive presentation is handled by the component.

This allows the figures to remain readable without attempting to reproduce the full desktop row on a smaller screen.

Layout Freedom

The Key Figures Component provides limited freedom over the arrangement of the individual figures.

Its value comes from its predefined visual treatment.

Administrators configure:

• Header
• Subheader
• Values
• Labels

The component determines how those figures are presented across desktop and mobile.

If the requirement is to create a completely custom arrangement of numbers, text or visual elements, Key Figures may not be the appropriate component.

Placement and Compatibility

The Key Figures Component can technically be used in several Page Designer layouts.

However, the fact that a component is available in a layout does not automatically mean that layout is the best choice.

The recommended placement hierarchy is:

1. Boxed Layout
2. Main Region
3. Tab Wrapper, with caution

Preferred Placement: Boxed Layout

The Boxed Layout is the recommended placement for the Key Figures Component.

It gives the figures sufficient room while integrating them naturally into a wider section or chapter of the page.

This should normally be the first placement considered.

Alternative Placement: Main Region

The Main Region is the second recommended option.

It provides enough space for the predefined Key Figures presentation and can be appropriate when the figures need greater exposure within the page.

Tab Wrapper: Use With Caution

The Key Figures Component can be placed inside a Tab Wrapper, but this is not the preferred placement.

Use this option only when the figures genuinely belong to the content and structure of the tab.

Do not place Key Figures inside a tab simply because the component is technically available there.

The composition should remain coherent and the figures should still receive sufficient visual space.

Visual Hierarchy

Key Figures carry visual importance because the component is specifically designed to make selected information stand out.

However, it should not automatically be treated as one of the most important elements of the entire page.

The component should support the page hierarchy rather than dominate it.

This is another reason why Boxed Layout is generally preferred over Main Region, with Tab Wrapper considered only when the composition makes sense.

Legacy Text Formatting

The Header, Subheader, Value and Label fields use the legacy rich-text editing experience.

The same general formatting limitations associated with the legacy Textbox approach therefore apply.

Do not expect the granular formatting freedom available in Textbox Plus.

Versatility

The Key Figures Component has a clear and focused purpose:

Highlight a small collection of important figures and make them easy to understand at a glance.

It is not intended to be a generic text component or a custom grid-building tool.

Its usefulness comes from combining concise information with a consistent predefined presentation.

Maximum of Five Key Figures

The component supports up to five Key Figures.

Do not plan a Key Figures section requiring more than the available five entries.

Keep Labels Short

Do not use the Label field for lengthy explanations.

Key Figures should communicate information quickly.

If additional explanation is necessary, provide it using another suitable component.

Do Not Expect Custom Figure Layouts

The arrangement of the figures is predefined.

On desktop, the figures are displayed together on one row.

On mobile, they adapt into a two-column-style presentation.

Prefer Boxed Layout

Although the component can be placed in several layouts, Boxed Layout should normally be the first choice.

Main Region is the second option.

Use Tab Wrapper With Caution

Tab Wrapper is possible but is not the preferred placement.

Only use it when the Key Figures genuinely belong within the tab content and the resulting composition works well.

Do Not Overstate the Component's Importance

Key Figures are visually noticeable, but they are not automatically the primary content of the page.

Use their placement to maintain an appropriate page hierarchy.

Legacy Text Limitations Apply

The component's text fields use the legacy rich-text editing experience.

Do not expect Textbox Plus formatting capabilities.

1. Determine Whether the Content Is Suitable for Key Figures

Before adding the component, confirm that the information can be communicated effectively through a small number of important figures.

The component is appropriate when visitors should be able to understand the information quickly.

If the content requires substantial explanation, consider supporting it with another content component.

2. Prepare the Figures and Labels

Prepare up to five figures.

For each figure, define:

• The Value
• A short Label

Keep the Label concise and straight to the point.

Remember:

Key figure, not life story.

3. Choose the Placement

Consider the available Page Designer structure using the following priority:

1. Boxed Layout
2. Main Region
3. Tab Wrapper, when appropriate

Start with Boxed Layout unless the page composition provides a reason to choose another supported placement.

4. Add the Key Figures Component

Locate Key Figures in the Page Designer component list.

Drag and drop it into the required location.

Open the component configuration.

5. Configure the Header

Locate the Header field.

Enter and format the Header when required to introduce the collection of figures.

The field uses the legacy rich-text editor.

6. Configure the Subheader

Locate the Subheader field.

Add supporting context when required.

Keep the introduction appropriate to a component whose primary purpose is to surface the figures themselves.

The field uses the legacy rich-text editor.

7. Configure Key Figure 1

Locate Key Figure 1.

Complete:

• Value
• Label

Use the Value for the figure itself and the Label for its concise explanation.

8. Configure the Additional Key Figures

Continue with the remaining Key Figure fields as required:

• Key Figure 2
• Key Figure 3
• Key Figure 4
• Key Figure 5

The component supports a maximum of five.

For every figure used, keep the relationship clear:

Value → short supporting Label

9. Review the Amount of Text

Before saving, review the Labels collectively.

Confirm that they remain concise.

If a Label has developed into a lengthy explanation, reconsider the content structure rather than forcing extensive copy into the Key Figures Component.

10. Consider the Desktop Presentation

Remember that the configured Key Figures will be presented together on one row on desktop.

Review the figures as a group and make sure the content is suitable for this predefined presentation.

11. Consider the Mobile Presentation

Remember that the component reorganizes the figures into a two-column-style presentation on mobile.

Keep Values and Labels concise enough to work effectively within this more compact responsive arrangement.

12. Review the Complete Component

Before saving, confirm that:

• The Header is appropriate where used.
• The Subheader is appropriate where used.
• No more than five Key Figures are required.
• Each Value communicates the intended figure.
• Each Label is short and direct.
• The content works as a coherent collection.
• The selected placement gives the component sufficient space.
• Boxed Layout has been prioritized where appropriate.
• Any use within a Tab Wrapper is justified by the surrounding content.

13. Click Apply

Once the configuration is complete, click Apply to save the Key Figures Component.

14. Validate on Staging

Validate the completed page on the appropriate staging storefront.

On desktop, confirm that:

• The figures display correctly on one row.
• Values and Labels are readable.
• The content remains concise.
• The component fits naturally within the surrounding page.
• The selected placement gives the figures sufficient room.

On mobile, confirm that:

• The figures adapt correctly into the two-column-style layout.
• Values remain readable.
• Labels remain concise and understandable.
• The responsive arrangement does not make the content feel overcrowded.

The key principle is:

Use Key Figures for information that deserves to stand out and can be understood quickly. Keep the labels short, prioritize Boxed Layout, and let the component's predefined responsive design handle the presentation.