This procedure is intended for Page Designer administrators who need to organize related content into separate tabs while retaining significant flexibility over the components and layouts used within each tab.

Component Objective

The Tab Wrapper Component is a nested layout component used to organize content into multiple selectable tabs.

Each tab is represented by a Tab Element, and each Tab Element contains its own Body into which Page Designer components can be added.

The structure is:

Tab Wrapper

→ Wrapper
   → Tab Element
      → Body
         → Components
   → Tab Element
      → Body
         → Components
   → Additional Tab Elements as required

This makes Tab Wrapper one of the most flexible structural components available in Page Designer.

Think of Tab Wrapper as an Extension of Boxed Layout

The Tab Wrapper shares some of the organizational philosophy of Boxed Layout.

A Boxed Layout can be thought of as a chapter of a book, grouping components that collectively express one idea.

Tab Wrapper takes this concept further by allowing that content to be divided into multiple selectable tabs.

Conceptually:

Boxed Layout = Chapter

Tab Wrapper = Chapter divided into tabs

This makes Tab Wrapper particularly useful when a related group of content contains several distinct subtopics that should remain together without being displayed simultaneously.

Tab Elements

Each individual tab is created using a Tab Element.

A Tab Element contains:

• A required Heading
• A Body

The Heading identifies the tab.

The Body contains the components displayed within that tab.

Tab Heading

When a Tab Element is selected, its properties expose:

Heading

The Heading is required.

Use it to clearly identify what the visitor will find within that tab.

Each Tab Element should therefore have a Heading that distinguishes its content from the other tabs in the Wrapper.

Tab Element Body

The Body is where the actual Page Designer content is placed.

Tab Wrapper is highly flexible, and almost everything can be placed inside a Tab Element Body.

This can include individual content components as well as compatible structural components.

For example, a Grid can be added inside a Tab Element and then populated with additional components.

A structure can therefore look like:

Tab Wrapper

→ Tab Element
   → Body
      → Grid
         → Column 1
         → Column 2

This gives administrators considerable flexibility when designing the content of an individual tab.

Multiple Tabs

Administrators can continue adding Tab Elements according to the content requirements.

Each Tab Element provides:

• Its own Heading
• Its own Body
• Its own collection of components

This allows a larger content section to be divided into more manageable parts.

Recommended Relationship With Boxed Layout

A particularly useful structure is:

Boxed Layout

↓

Tab Wrapper

↓

Tab Elements

↓

Content

The Boxed Layout can provide the wider chapter structure, while Tab Wrapper divides that chapter into individual tabs.

This is a recommended nesting relationship.

Tab Elements Already Have Margins

Tab Elements have their own margins.

Therefore, there is no need to add a Boxed Layout inside a Tab Element simply to obtain margins.

Avoid creating:

Tab Wrapper

→ Tab Element
   → Boxed Layout
      → Content

when the only reason for the additional Boxed Layout is to provide margins.

The Tab Element already provides that contained presentation.

Avoid Tab Wrapper Inside Tab Wrapper

Do not nest a Tab Wrapper inside another Tab Wrapper.

Tab Wrapper already provides the mechanism for dividing content into multiple tabs.

Adding another Tab Wrapper inside one of those tabs introduces unnecessary nested navigation and structural complexity.

The recommended relationship is:

Boxed Layout → Tab Wrapper

not:

Tab Wrapper → Tab Wrapper

Using Grids Inside Tabs

Grid layouts can be used inside a Tab Element Body.

For example:

Tab Element

→ Body
   → 2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop)
      → Column 1
      → Column 2

This allows the content within a tab to have its own responsive multi-column structure.

The normal Grid recommendations still apply.

Do not create excessive nested Grid structures, and ensure that components placed into Grid columns have enough space to display correctly.

Technical Compatibility vs. Recommended Experience

Tab Wrapper can accommodate almost every type of Page Designer content.

However:

The fact that a component can be placed inside a Tab Element does not automatically mean that placing it behind a tab is the best experience.

Consider whether the visitor should have immediate access to the content or whether placing it inside a selectable tab makes sense.

Tab Wrapper should help organize content, not unnecessarily hide important information.

Versatility

Tab Wrapper provides significant versatility because each tab can contain its own composition.

For example, different Tab Elements can contain:

• Simple text content
• Images
• Media components
• Grids
• Multiple components
• Different combinations of compatible Page Designer components

This makes it possible to create substantially different content structures inside the same Tab Wrapper.

Recommended Use

Use Tab Wrapper when:

• Several pieces of content belong to the same broader subject.
• The content can logically be separated into subtopics.
• Displaying everything simultaneously would make the page unnecessarily long or difficult to navigate.
• Each section can be represented by a meaningful Tab Heading.
• The visitor benefits from selecting which part of the content to view.

Tab Wrapper Is a Nested Layout Component

The Tab Wrapper does not create the actual content.

It creates the structure containing Tab Elements, whose Bodies then contain Page Designer components.

Each Tab Requires a Heading

The Heading identifies the individual Tab Element and is required.

Use clear headings that communicate what each tab contains.

Do Not Nest Tab Wrapper Inside Tab Wrapper

Avoid:

Tab Wrapper → Tab Element → Tab Wrapper

Nested tabs create unnecessary complexity and are not recommended.

Boxed Layout Can Contain Tab Wrapper

The recommended nesting direction is:

Boxed Layout → Tab Wrapper

This allows a broader chapter to contain a tabbed section.

Do Not Add Boxed Layout Inside a Tab Merely for Margins

Tab Elements already have their own margins.

Adding Boxed Layout inside a Tab Element simply to obtain margins creates unnecessary structural nesting.

Almost Everything Does Not Mean Everything Is Recommended

Tab Wrapper is highly flexible, but always consider whether the selected component should actually be placed behind a tab.

Technical compatibility and good content design are not necessarily the same thing.

Be Careful With Additional Nested Layouts

A Grid can be useful within a Tab Element, but do not continue adding unnecessary layers of structural components.

Keep the Page Structure understandable and responsive.

1. Determine Whether Tabs Are Appropriate

Review the content that needs to be displayed.

Use Tab Wrapper when several pieces of content:

• Belong to the same broader idea
• Can be separated into meaningful subtopics
• Benefit from being accessed through individual tabs

If all the content should remain immediately visible at the same time, reconsider whether Tab Wrapper is necessary.

2. Consider the Wider Page Structure

Determine whether the Tab Wrapper belongs directly within the page structure or within a Boxed Layout.

A useful structure is:

Boxed Layout

→ Tab Wrapper

when the entire tabbed section belongs to one larger chapter of the page.

3. Add the Tab Wrapper

Locate the Tab Wrapper Component in Page Designer.

Add it to the required location.

The Page Structure exposes:

Tab Wrapper

→ Wrapper

The individual Tab Elements will be added inside this Wrapper.

4. Add the First Tab Element

Use the + control on the Wrapper to add a Tab Element.

The structure becomes:

Tab Wrapper

→ Wrapper
   → Tab Element
      → Body

5. Configure the Tab Heading

Select the Tab Element.

Under General, complete the required:

Heading

Enter a clear name that communicates what the visitor will find inside the tab.

6. Add Content to the Tab Body

Use the + control on the Tab Element's Body.

Select the required Page Designer component.

Almost everything can be added to a Tab Element, so choose the component according to the content requirement.

Configure the inserted component according to its own procedure.

Click Apply where required to save its configuration.

7. Add Additional Components Where Required

Continue adding components to the same Body if the tab requires more than one piece of content.

Keep the content logically related to the Tab Heading.

The Tab Element should represent a coherent section rather than an arbitrary collection of components.

8. Use a Grid When a Tab Requires Additional Structure

If the content inside a Tab Element requires a multi-column presentation, a compatible Grid can be added to the Body.

For example:

Tab Element

→ Body
   → 2 Row x 1 Col (Mobile), 1 Row x 2 Col (Desktop)
      → Column 1
      → Column 2

Add the required components to the Grid columns.

Remember that the normal Grid rules still apply, including providing enough space for the inserted components and avoiding problematic nested Grid structures.

9. Do Not Add a Boxed Layout Just for Margins

When building the content inside the Tab Element, remember that the tab already has its own margins.

Do not automatically create:

Tab Element → Body → Boxed Layout

simply to obtain the same contained presentation.

Use the Tab Element's existing structure.

10. Add Additional Tab Elements

Return to the Wrapper and add another Tab Element when another subtopic is required.

For each new Tab Element:

1. Add the Tab Element.
2. Configure its required Heading.
3. Add the required components to its Body.
4. Configure those components.
5. Click Apply where required.

Continue according to the number of tabs required by the content.

11. Do Not Add Another Tab Wrapper Inside a Tab

When building the content of an individual Tab Element, do not insert another Tab Wrapper.

Avoid:

Tab Wrapper

→ Tab Element
   → Body
      → Tab Wrapper

If the content requires additional organization, reconsider the overall tab structure rather than creating tabs inside tabs.

12. Review the Content Architecture

Before completing the page, confirm that:

• The Tab Wrapper represents a coherent broader subject.
• Each Tab Element represents a meaningful subtopic.
• Each tab has a clear Heading.
• Content has been placed inside the correct Tab Element Body.
• Components placed behind tabs make sense in that context.
• Boxed Layout has not been added inside tabs merely for margins.
• No Tab Wrapper has been nested inside another Tab Wrapper.
• Any Grid used within a tab remains appropriate and responsive.
• The Page Structure remains understandable to another administrator.

13. Review Whether Important Content Is Being Unnecessarily Hidden

Consider the visitor experience.

Ask whether the content placed inside each tab genuinely benefits from being separated.

If important content should be immediately visible without requiring the visitor to select a tab, reconsider whether Tab Wrapper is the appropriate structure.

Use tabs to organize content, not simply to reduce the amount of content visible on the page.

14. Validate on Staging

Validate the completed Tab Wrapper on the appropriate staging storefront.

Confirm that:

• The Tab Wrapper displays correctly.
• All intended Tab Elements are available.
• Each Heading correctly represents its content.
• Selecting each tab displays the appropriate Body.
• Components inside each Body display correctly.
• Grids and other nested structures remain responsive where used.
• The built-in margins provide the intended presentation.
• No unnecessary nested container causes display problems.
• The tabbed structure remains usable across the required screen sizes.

The key principle is:

Use Tab Wrapper to divide one broader content subject into meaningful selectable tabs. Each Tab Element has its own Heading, Body and margins, and can contain almost any appropriate Page Designer content. Boxed Layout can contain a Tab Wrapper, but avoid redundant Boxed Layouts inside tabs and never use Tab Wrapper inside another Tab Wrapper.