This procedure is intended for Page Designer administrators who need to create a clear visual choice between two destinations.

The Crossroads component is a navigation and conversion-oriented component. It should be used when visitors reach a point in the page where they need to choose between two distinct paths.

Objective

The Crossroads component is designed to present two prominent visual choices side by side.

Each side represents a separate destination.

On desktop, the two choices are displayed side by side.

On mobile, the responsive layout displays the choices one above the other.

The purpose of the component is therefore very specific:

Present two choices → allow the visitor to select one → send the visitor directly to the corresponding destination.

The component should be treated as a navigation and conversion component, rather than simply as a visual layout.

Component Structure

The Crossroads component consists of two individual visual areas.

Each side can be configured independently with its own:

• Header
• Subheader
• Invert Text Color setting
• Image
• URL

This allows the administrator to create two visually distinct paths within the same component.

Header

The Header acts as the main title for each choice.

It should communicate what the destination or option represents.

The Header is optional.

Subheader

The Subheader provides the secondary text associated with each choice.

Within the Crossroads component, the Subheader also serves as the CTA treatment for the destination.

This means that there is no separate conventional CTA button to configure.

The Subheader communicates the action associated with the destination.

The Subheader is optional.

Destination URL

Each side of the Crossroads component contains a URL field.

Unlike the Header and Subheader, the destination URL is mandatory.

This reflects the fundamental purpose of the component: every side of the Crossroads is intended to lead somewhere.

Depending on the destination required, the URL can lead to destinations such as:

• A page
• A product
• A category
• An external URL

The administrator can therefore use the component to create two different visitor journeys from the same point on the page.

Image

Each side of the Crossroads contains its own image.

The expected visual dimensions are:

625 × 445 px

The imagery should help visitors immediately distinguish between the two available paths.

Because the component is strongly visual, the two images should work together as part of the same Crossroads while remaining sufficiently distinct to communicate the two different options.

Invert Text Color

Each side provides an Invert Text Color option.

Use this setting when the selected image requires white text to maintain sufficient contrast.

The decision should be made independently for each side according to its respective image.

For example, if one image has a light area behind the text while the other has a dark area, the two sides may require different text-color settings.

The objective is always to maintain sufficient readability and contrast.

 

Placement and Compatibility

The recommended placements for the Crossroads component are:

1. Main Region
2. Boxed Layout

Although the component may technically fit within certain other Page Designer structures, these are not recommended.

Main Region

Use the Main Region when the Crossroads should have strong visual prominence and sufficient space for both choices.

This is particularly appropriate when the decision presented by the component represents an important part of the visitor journey.

Boxed Layout

Use a Boxed Layout when the Crossroads should remain within the standard page margins while still providing enough space for both visual choices.

Why Constrained Placements Are Not Recommended

The Crossroads is a conversion-oriented component.

Its purpose is to expose two choices clearly and allow the visitor to move immediately towards the selected destination.

For this reason, avoid hiding the component inside structures that introduce additional interactions or reduce its visual prominence.

Do not intentionally squeeze the Crossroads into small or crowded Grid structures simply because Page Designer technically allows the placement.

The component should remain:

• Visible
• Easy to understand
• Easy to interact with
• Large enough for both choices to remain visually distinct

For the standard implementation, use Main Region or Boxed Layout.

 

Versatility and Typical Uses

Two-Way Navigation

The primary use of the Crossroads component is to divide a visitor journey into two clear paths.

For example, a page may reach a point where visitors need to choose between:

• Two types of content
• Two categories
• Two product journeys
• Two different sections of the website
• Two different pages

The exact destinations can vary, but the underlying pattern remains the same:

Choice A or Choice B.

Conversion-Oriented Navigation

The component is particularly appropriate when both destinations are important and should receive strong visual exposure.

Rather than presenting the destinations as small links within surrounding content, Crossroads turns the choice itself into a major page element.

This makes it useful when the administrator wants visitors to make an explicit decision before continuing their journey.

Standalone Usage

The Crossroads component can be considered standalone.

Its imagery, Header, Subheader and destination URLs provide the information required for visitors to understand and use the component.

It does not need to be paired with another component to perform its function.

Additional content can naturally appear before or after it as part of the overall page, but no specific component pairing is required.

 

Alternative / Creative Uses

The Crossroads component has limited versatility by design.

Its required destination URLs mean that it should always represent a navigational choice.

It should therefore not be repurposed simply because an administrator needs two images displayed side by side.

For example, if the requirement is:

"I want to display two complementary images next to each other."

Crossroads is not automatically the appropriate component.

The visual similarity to a two-column image layout does not change its underlying purpose.

The component is designed to provide:

Two visual options + two destinations.

If no navigation is required, another component or layout should be considered.

The URL Is Mandatory

Each side of the Crossroads is intended to lead to a destination.

The URL field is mandatory.

Do not use Crossroads for purely decorative side-by-side imagery.

Do Not Treat Crossroads as a Generic Two-Column Layout

The component may visually resemble two images displayed next to each other, but that is not its purpose.

Crossroads is a navigation component.

Use it when visitors are genuinely being presented with two paths.

Prefer Main Region or Boxed Layout

Use the component in:

• Main Region
• Boxed Layout

Avoid constrained Grid structures or other placements that reduce the visibility or usability of the two choices.

Keep the Visitor Journey Direct

Because Crossroads is conversion-oriented, the two choices should be directly exposed.

Avoid hiding the component behind additional interactions.

The visitor should be able to:

See the two choices → select one → reach the selected destination.

Header and Subheader Are Optional

The Header and Subheader are optional.

Use them when they help clarify the available choices.

However, remember that the Subheader serves as the CTA treatment, so omitting it removes the explicit supporting call-to-action text associated with that choice.

Maintain Text Contrast

Check each image independently.

Activate Invert Text Color when white text provides better readability against the selected image.

Do not assume that both sides require the same setting.

Prepare the Correct Image Format

Prepare each Crossroads visual at:

625 × 445 px

Consider the position of the subject and the text area when selecting or preparing the imagery.

Consider Mobile Presentation

Remember that the desktop side-by-side presentation becomes top and bottom on mobile.

The two choices should therefore make sense both as a horizontal pair and as individual stacked entries.

Do not create a visual concept that only works when the two images are physically positioned next to each other.

1. Define the Two Visitor Paths

Before adding the component, identify the two destinations you want to present.

Crossroads works best when the page genuinely reaches a decision point.

Define:

Path A: Where should the first choice lead?

Path B: Where should the second choice lead?

If there are no two distinct destinations, reconsider whether Crossroads is the appropriate component.

2. Prepare the Two Images

Prepare one visual for each side of the Crossroads.

The expected dimensions for each image are:

625 × 445 px

Choose images that:

• Represent their respective destinations
• Work well together visually
• Remain sufficiently different for visitors to distinguish the two choices
• Provide sufficient space for readable text

Upload the images to the Media Library if they are not already available.

3. Choose the Placement

Choose one of the recommended locations:

Option A: Main Region

Use the Main Region when the Crossroads should have strong prominence within the page.

Option B: Boxed Layout

Use a Boxed Layout when the component should respect the page margins while maintaining sufficient space for both choices.

Avoid constrained Grid layouts or other structures that unnecessarily reduce the size or visibility of the component.

4. Add the Crossroads Component

Locate the Crossroads component in the Page Designer component list.

Drag and drop it into the selected Main Region or Boxed Layout.

5. Configure the First Side

Begin with the first Crossroads choice.

Select the image prepared for the first destination.

Header

Enter the Header if a main title is required.

Use it to clearly identify the first option.

The Header is optional.

Subheader

Enter the Subheader if supporting CTA text is required.

Remember that the Subheader serves as the CTA treatment for the choice.

The Subheader is optional.

6. Configure Text Contrast for the First Side

Review the Header and Subheader against the selected image.

If the default text does not provide sufficient contrast, activate:

Invert Text Color

This displays the text in white.

Choose the setting according to the image being used.

7. Configure the First Destination

Complete the mandatory URL field for the first side.

Select the appropriate destination.

Depending on the required journey, this can lead to a:

• Page
• Product
• Category
• External URL

Confirm that the selected destination corresponds to the first Crossroads choice.

8. Configure the Second Side

Repeat the same configuration for the second choice.

Select the second 625 × 445 px image.

Configure the optional:

• Header
• Subheader

Review whether Invert Text Color is required for the second image.

The configuration does not necessarily need to match the first side. Text contrast should be determined according to each individual visual.

9. Configure the Second Destination

Complete the mandatory URL field for the second side.

Select the appropriate destination and confirm that it corresponds to the second Crossroads choice.

At this stage, both sides should represent complete and distinct navigational paths.

10. Review the Relationship Between the Two Choices

Review the Crossroads as a complete component rather than evaluating each side independently.

Confirm that:

• There are genuinely two distinct choices.
• Both destinations are relevant at this point in the visitor journey.
• The two images work together visually.
• Each option is easy to understand.
• The Headers are clear if used.
• The Subheaders communicate the intended action if used.
• Text remains readable against both images.
• Each URL leads to the correct destination.
• Neither choice is visually confusing or misleading.

11. Consider the Mobile Experience

Remember that the two side-by-side choices displayed on desktop will become stacked on mobile.

Check that each choice remains understandable independently.

The experience should not rely exclusively on visitors seeing the two images next to each other.

12. Click Apply

Once both sides of the Crossroads have been configured, click Apply.

Apply saves the Crossroads component configuration.

13. Validate the Crossroads on Staging

Validate the completed page on the appropriate staging storefront.

On desktop, confirm that:

• Both choices display correctly side by side.
• The images display correctly.
• The Headers and Subheaders are readable.
• Text contrast is sufficient.
• Both choices have sufficient visual prominence.
• Each destination works correctly.

Also validate the responsive experience.

On mobile, confirm that:

• The two choices display correctly one above the other.
• Each choice remains understandable independently.
• Text remains readable.
• Both destinations remain easy to access.

Finally, test both navigational paths:

Choice A → Correct destination

Choice B → Correct destination

If the component looks visually appropriate but there is no meaningful navigational choice between two destinations, reconsider the component selection. Crossroads should remain a Crossroads rather than being used as a substitute for a generic side-by-side image layout.