This procedure is intended for Page Designer administrators who need to organize related components into clear, responsive sections and manage those sections efficiently within the Page Structure.

Component Objective

The Boxed Layout Component is a responsive container with embedded margins.

Components placed inside its Body are displayed within this contained structure.

However, Boxed Layout should not be considered simply as a way to add margins.

It is also an important tool for:

• Structuring a page
• Grouping related content
• Improving Page Structure readability
• Applying targeting to complete groups of content
• Moving complete sections more efficiently

Think of a Boxed Layout as a Chapter

The recommended approach is to use a Boxed Layout to group components that collectively express one idea.

A useful analogy is to think of the page as a book and each Boxed Layout as a chapter.

For example:

Boxed Layout: Chapter A

→ Component
→ Component
→ Component

Boxed Layout: Chapter B

→ Component
→ Component

Each chapter contains the components required to communicate that particular idea.

When the subject changes, consider whether a new Boxed Layout should begin.

This creates a clearer page structure than placing unrelated components together simply because they all fit within the same container.

Embedded Margins

Boxed Layout includes its own margins by design.

Components placed inside its Body therefore benefit from the contained presentation provided by the layout.

This is one of the main visual differences between placing content directly within a wider page region and grouping it inside a Boxed Layout.

Responsive Design

The Boxed Layout is designed to be responsive.

Its contained structure and embedded margins provide a framework for organizing components while supporting the page's responsive presentation.

The components placed inside the Body remain responsible for their own individual content and behavior.

Body

The Body is the area of the Boxed Layout into which the chapter's components are placed.

When using Boxed Layout as recommended, all components belonging to the same chapter should be placed inside its Body.

This is particularly important when the Boxed Layout will later be used for:

• Targeting
• Reorganization
• Quick displacement

Correct grouping makes these administrative capabilities much more useful.

Full Width Component Restriction

Components that are Full Width by design cannot be added to the Body of a Boxed Layout.

This is an important structural limitation.

The Boxed Layout provides a contained presentation with embedded margins, while Full Width components are designed around a different page presentation.

Do not plan a chapter structure that depends on placing a Full Width component inside the Boxed Layout Body.

Rename the Boxed Layout

Administrators can rename a Boxed Layout through the component's Settings.

Renaming is strongly recommended.

The name provides additional context directly within the Page Structure, making it easier to understand what each Boxed Layout represents.

Instead of seeing multiple Boxed Layouts without meaningful context, an administrator can identify the purpose of each section from its name.

This is particularly useful when:

• The page contains several Boxed Layouts
• Many components are present
• Another administrator needs to understand the page
• The page needs to be maintained later
• A complete chapter needs to be moved or targeted

Use a name that clearly communicates what the section is about.

Administrative Visibility

A well-named Boxed Layout turns the Page Structure into a more understandable representation of the page.

For example, instead of having several containers that are difficult to distinguish, the administrator can use the Boxed Layout names to understand the different chapters of the page.

This makes the page easier to navigate and maintain, particularly for administrators who did not originally create it.

Targeting a Boxed Layout

Targeting is one of the major advantages of structuring content correctly with Boxed Layout.

If all the components belonging to one chapter have been placed inside the Boxed Layout's Body, targeting can be applied directly to the Boxed Layout.

The targeting applied to the Boxed Layout then applies to the elements contained within its Body.

Conceptually:

Targeting applied to Boxed Layout

↓

Body

↓

Component

Component

Component

This makes it possible to manage the visibility of an entire chapter without configuring the same targeting individually on every component.

Applying Targeting to Selected Components

Not every element within a chapter necessarily needs to follow the same targeting.

Administrators can alternatively apply targeting only to selected components within the Boxed Layout.

This provides two levels of control:

Boxed Layout-Level Targeting

Use when the complete chapter should follow the same targeting.

Individual Component Targeting

Use when only selected elements within the chapter should be targeted.

Choose the level that reflects the actual content requirement.

Why Correct Grouping Matters for Targeting

The usefulness of Boxed Layout-level targeting depends on how the content has been structured.

If a chapter is spread across multiple containers or components that sit outside the Boxed Layout Body, targeting the Boxed Layout will not provide the intended chapter-level control.

Therefore, when a group of components belongs to the same idea and is expected to follow the same targeting, place all of those components inside the same Boxed Layout Body.

Quick Displacement

Boxed Layout also makes page reorganization easier.

Because related components are grouped inside one container, the administrator can move the Boxed Layout itself when the entire chapter needs to change position.

The components contained inside its Body move with it.

Instead of moving:

Component A

then

Component B

then

Component C

the administrator can move:

Boxed Layout

with the complete group of content inside it.

This makes rearranging larger pages considerably easier.

Boxed Layout as a Page-Building Tool

A well-structured Boxed Layout therefore provides four important benefits:

1. Visual Structure

Embedded margins create a contained presentation.

2. Content Organization

Related components can be grouped according to the idea or chapter they belong to.

3. Targeting

The complete chapter can be targeted through the Boxed Layout, or individual components can be targeted when more granular control is required.

4. Administration

Meaningful names and grouped content make the Page Structure easier to understand, maintain and reorganize.

Do Not Treat Boxed Layout Only as a Margin Tool

Embedded margins are an important feature, but Boxed Layout also provides structural, administrative and targeting benefits.

Use it to organize meaningful groups of content.

Group Components by Idea

A Boxed Layout should ideally represent one coherent idea or chapter.

Avoid grouping unrelated components simply because they can all be placed inside the same Body.

Full Width Components Cannot Be Added to the Body

Components that are Full Width by design cannot be inserted into the Boxed Layout Body.

Take this restriction into account when planning the page structure.

Rename Boxed Layouts

Leaving multiple Boxed Layouts without meaningful names makes the Page Structure more difficult for administrators to understand.

Rename the component through its Settings to communicate what the section represents.

Boxed Layout-Level Targeting Affects the Body

If targeting is applied to the Boxed Layout, it applies to the elements contained within its Body.

Make sure that the Body contains the correct components before applying chapter-level targeting.

Do Not Use Chapter-Level Targeting When Only Selected Elements Should Be Targeted

If only part of the chapter needs different visibility rules, apply targeting to the appropriate individual components instead.

Keep the Complete Chapter Together When Appropriate

If related components are scattered outside the Boxed Layout, the benefits of chapter-level targeting and quick displacement are reduced.

1. Identify the Chapter or Idea

Before adding a Boxed Layout, determine which group of content belongs together.

Ask what single idea, subject or section the components collectively communicate.

Think of this group as a chapter of the page.

2. Add the Boxed Layout

Locate the Boxed Layout Component in Page Designer.

Add it to the required position within the page.

The Boxed Layout provides a Body where the components belonging to the chapter can be added.

3. Open the Boxed Layout Settings

Open the Settings of the Boxed Layout.

Use the available setting to rename the component.

4. Give the Boxed Layout a Meaningful Name

Rename the Boxed Layout according to the content or idea it contains.

Choose a name that will allow another administrator to understand the purpose of the section directly from the Page Structure.

Avoid names that provide no information about the chapter's content.

5. Add the Chapter Components to the Body

Add the components belonging to the chapter inside the Boxed Layout's Body.

Conceptually:

Boxed Layout: Meaningful Chapter Name

→ Body
   → Component
   → Component
   → Component

Keep related elements together when they collectively express the same idea.

6. Do Not Add Full Width Components to the Body

When selecting the components for the chapter, remember that Full Width components by design cannot be added to the Boxed Layout Body.

If the page requires a Full Width component, account for it separately in the overall page structure.

7. Configure the Components

Configure each component contained within the Body according to its own requirements.

Complete the appropriate Apply actions for each component after configuration.

8. Decide Whether Targeting Is Required

Determine whether the chapter needs targeting.

Then decide whether the targeting should affect:

• The entire chapter
• Only selected components within the chapter

This determines where targeting should be configured.

9. Apply Targeting to the Boxed Layout When the Entire Chapter Should Be Targeted

When all elements inside the Body should follow the same targeting, apply the targeting to the Boxed Layout itself.

Use:

Boxed Layout dropdown arrow → Targeting → Targeting window

The Targeting window provides:

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

Configure the required targeting and click Apply.

The targeting applied to the Boxed Layout will apply to the elements contained within its Body.

10. Apply Targeting Individually When Only Selected Components Should Be Targeted

If only specific elements within the chapter require targeting, do not target the complete Boxed Layout.

Instead, open Targeting for the selected component or components and configure the appropriate rules there.

This allows the Boxed Layout to continue grouping the complete chapter while individual elements receive more specific targeting.

11. Use the Boxed Layout for Quick Displacement

If the complete chapter needs to move elsewhere on the page, move the Boxed Layout rather than moving every component individually.

Because the chapter components are contained within its Body, the complete group can be displaced together.

This is particularly useful on longer pages containing several sections.

12. Review the Page Structure

Before completing the page, review the Boxed Layout in the Page Structure.

Confirm that:

• The Boxed Layout has a meaningful name.
• Its Body contains the components belonging to the same idea.
• Unrelated content has not been included unnecessarily.
• Full Width components have not been placed inside the Body.
• The chapter structure is understandable to another administrator.
• Targeting is applied at the correct level.
• Components that should move together are grouped together.

13. Validate Targeting Where Applicable

If targeting has been configured, confirm that it has been applied at the intended level.

For chapter-level targeting, verify that all elements that should follow the rule are contained inside the Boxed Layout Body.

For component-level targeting, verify that only the intended individual components have received the specific targeting.

14. Validate on Staging

Validate the completed page on the appropriate staging storefront.

Confirm that:

• The Boxed Layout provides the expected contained presentation and embedded margins.
• The section remains responsive.
• Components inside the Body display correctly.
• The chapter appears as one coherent section.
• Targeting behaves as intended where configured.
• The page structure and visual presentation remain correct after any displacement of the Boxed Layout.

The key principle is:

Use Boxed Layout as the chapter structure of a Page Designer page. Group components that express the same idea inside its Body, rename the Boxed Layout so administrators can immediately understand its purpose, target the complete container when the entire chapter should follow the same rules, and move the Boxed Layout when the complete chapter needs to be repositioned.