This procedure is intended for Page Designer administrators who need to present products that are intended to be used in a defined sequence as part of a routine.

Component Objective

The Product Recommendations (Complete your Routine) Component is designed specifically to present a sequence of products that belong to the same routine.

The component supports up to four products.

Each product is presented to the visitor with a number representing the step at which that product should be used.

Conceptually:

Step 1 → First Product
Step 2 → Second Product
Step 3 → Third Product
Step 4 → Fourth Product

This sequential presentation is fundamental to the component's purpose.

It is therefore not a generic product recommendation component.

Routine-Specific Usage

Only use this component when the selected products form a genuine sequence.

For example, if several products belong to a routine and should be used in a particular order, the component can communicate that order through its built-in step numbering.

The administrator can configure up to four products according to the number of steps required.

Because the visitor sees a number associated with each product, the component cannot be repurposed for an unrelated collection of products without communicating a false sequence.

Optional Header and Subheader

The component provides:

• Header
• Subheader

Both are optional.

Use them when the routine requires an introduction or additional context.

The fields use the legacy rich-text editing approach.

They can be left empty when no introductory content is required.

Colored Background

The component provides a:

Colored background

option.

Enable or disable this option according to the intended presentation of the routine.

Display and Commerce Controls

The component provides three independent controls:

• Disable add to cart
• Disable price
• Disable PDP links

These settings provide flexibility over how visitors can interact with the products displayed in the routine.

Disable Add to Cart

Enable Disable add to cart when visitors should not be able to add products to their cart directly from this component.

Leave it disabled when Add to Cart should remain available.

Disable Price

Enable Disable price when product prices should not be displayed within the component.

Leave it disabled when prices should remain visible.

Disable PDP Links

Enable Disable PDP links when visitors should not be able to use the component to access the corresponding Product Detail Pages.

Leave it disabled when PDP access should remain available.

Product Positions

The component provides four product positions:

1. First Product
2. Second Product
3. Third Product
4. Fourth Product

These positions correspond to the sequence communicated to the visitor.

For each product, the administrator can configure:

• Product
• Product Image
• Product Tag

Product Field

The Product field is used to identify the product.

Enter the product's:

SKU

Use the SKU corresponding to the product required at that step of the routine.

Because product position communicates sequence, make sure the correct SKU is entered into the correct First, Second, Third or Fourth Product section.

Product Image

Each product position provides a Product Image field.

Select the corresponding product visual from the default Media Library.

The product images are available within the Packshot structure, including the relevant product folders, and the screenshot shows the NEWS folder within the product structure.

Select the image corresponding to the product configured for that step.

Product Tag

Each product position provides a Product Tag.

The Product Tag is the claim associated with the product.

Claims are provided by HQ.

Do not invent a new claim.

Administrators should use the approved claim provided by HQ for the corresponding product.

The Product Tag should not be treated as an opportunity to create new marketing copy.

Up to Four Products

The component can contain a maximum of four products.

The four available positions represent the potential steps in the routine.

The component does not need to use all four positions if the routine contains fewer products.

Use only the number of products actually required by the routine.

Why This Component Cannot Be Repurposed

Some Page Designer components can be creatively reused beyond their original intended purpose.

This component should not.

The visitor-facing design automatically associates the products with step numbers.

Those numbers communicate:

This product comes first, this product comes second, this product comes third, and so on.

Using the component for unrelated products would therefore communicate a sequence that does not exist.

Do Not Use for Generic Product Recommendations

Do not use Product Recommendations (Complete your Routine) merely because you need to display several products.

It should not be used as a substitute for:

• A generic product selection
• Unrelated recommended products
• A generic collection of featured products
• A product comparison

The products must belong to a meaningful routine with a defined sequence.

Key Capabilities

The component combines several capabilities:

Sequential presentation

Up to four products can be presented as numbered steps.

Commerce flexibility

Administrators can independently disable:

• Add to Cart
• Price
• PDP links

Presentation

An optional Header and Subheader can introduce the routine, and a Colored background can be enabled.

Product-specific content

Each step can have its own:

• SKU
• Product Image
• HQ-approved Product Tag

Only Use This Component for a Routine

The selected products must form a genuine sequence.

The built-in numbering means the component should not be used for an unrelated product collection.

Maximum of Four Products

The component supports up to four product positions.

Product Order Matters

First Product, Second Product, Third Product and Fourth Product represent the sequence communicated to the visitor.

Make sure products are configured in the correct order.

Enter the SKU in the Product Field

The Product field expects the product SKU.

Select the Corresponding Product Image

Use the appropriate product image from the default Media Library.

Do not accidentally associate a product SKU with the wrong product visual.

Product Tag Must Use an HQ-Approved Claim

The Product Tag represents the claim associated with the product.

Claims are provided by HQ. Do not invent, rewrite or create a new claim.

Do Not Treat the Component as a Generic Four-Product Layout

The presence of four product positions does not make this a generic product display component.

The user-facing step numbering preserves its routine-specific meaning.

1. Define the Routine

Before adding the component, determine which products form the routine.

Confirm:

• Which products belong to the routine
• How many products are required
• The correct order in which they should be used

The sequence is essential because the visitor will see each product represented as a numbered step.

2. Gather the Required Product Information

For each product in the routine, prepare:

• Product SKU
• Corresponding Product Image
• HQ-approved Product Tag / claim

Do not create new product claims.

If the approved claim is not available, obtain the appropriate information from HQ rather than inventing one.

3. Add Product Recommendations (Complete your Routine)

Locate:

Product Recommendations (Complete your Routine)

in Page Designer.

Add the component to the required location.

4. Configure the Optional Header

Under General, configure Header if the routine requires an introductory title.

The field uses the legacy rich-text editor.

Leave it empty when no Header is required.

5. Configure the Optional Subheader

Configure Subheader if additional introductory context is required.

The field also uses the legacy rich-text editor.

Leave it empty when no Subheader is required.

6. Decide Whether to Use a Colored Background

Use Colored background according to the intended presentation of the component.

Enable the option when the colored treatment is required.

7. Configure Add to Cart Availability

Determine whether visitors should be able to add the displayed products directly to their cart.

Enable:

Disable add to cart

when Add to Cart should not be available.

Otherwise, leave the option disabled.

8. Configure Price Visibility

Determine whether prices should appear.

Enable:

Disable price

when prices should not be displayed.

Otherwise, leave the option disabled.

9. Configure PDP Access

Determine whether visitors should be able to access the individual Product Detail Pages from the component.

Enable:

Disable PDP links

when PDP access should not be available.

Otherwise, leave the option disabled.

Configure the Routine Products

10. Configure the First Product

Under First Product:

Product

Enter the SKU of the first product in the routine.

Product Image

Select the corresponding product visual from the default Media Library.

Navigate through the appropriate Packshot product structure and select the corresponding image.

Product Tag

Enter the HQ-approved claim associated with the product.

Do not invent a claim.

This product will represent the first step of the routine.

11. Configure the Second Product

If the routine contains a second product, move to Second Product.

Enter:

• Product SKU
• Corresponding Product Image
• HQ-approved Product Tag

Confirm that this product genuinely represents the second step of the routine.

12. Configure the Third Product

If required, move to Third Product.

Enter:

• Product SKU
• Corresponding Product Image
• HQ-approved Product Tag

This product should represent the third step.

13. Configure the Fourth Product

If the routine contains a fourth step, configure Fourth Product.

Enter:

• Product SKU
• Corresponding Product Image
• HQ-approved Product Tag

The component supports a maximum of four products.

14. Do Not Populate Unnecessary Product Positions

If the routine contains fewer than four products, do not add unrelated products merely to fill the remaining positions.

The number of products should reflect the actual routine.

15. Review the Product Sequence

Before saving, review the complete sequence.

Confirm:

First Product → Step 1

Second Product → Step 2

Third Product → Step 3

Fourth Product → Step 4

where applicable.

Make sure the order represents how the products are actually intended to be used.

16. Verify Each Product

For every configured product, confirm that:

• The correct SKU has been entered.
• The correct Product Image has been selected.
• The Product Tag uses the correct HQ-approved claim.
• The product occupies the correct position in the routine.

Pay particular attention to mismatches between SKU, image and claim.

17. Review the Commerce Settings

Confirm that the component has the intended combination of:

• Add to Cart availability
• Price visibility
• PDP access

Use the three Disable settings independently according to the purpose of the routine.

18. Click Apply

Once the complete routine has been configured, click:

Apply

to save the component configuration.

19. Validate on Staging

Validate the completed Product Recommendations (Complete your Routine) Component on the appropriate staging storefront.

Confirm that:

• The optional Header and Subheader display correctly when configured.
• The Colored background displays as intended when enabled.
• The correct number of products appears.
• Products appear in the correct sequence.
• Each product is associated with the correct step number.
• The correct product image appears for each SKU.
• Product Tags display the approved claims.
• Add to Cart is available or disabled as intended.
• Prices are visible or disabled as intended.
• PDP links are available or disabled as intended.
• The component clearly communicates a product routine rather than an unrelated product collection.

The key principle is:

Use Product Recommendations (Complete your Routine) exclusively for products that form a genuine sequence. Configure up to four products in their correct step order using the SKU, corresponding product image and HQ-approved claim. Never invent Product Tags, and never repurpose the component as a generic product display because its built-in numbering explicitly communicates the order in which the products should be used.