Purpose of this procedure

This procedure explains how to create a new page in Salesforce Commerce Cloud (SFCC) Page Designer, configure it correctly and prepare it for publication.

By following this procedure, you will learn how to:

• Select the appropriate Page Designer layout for the content you want to create.
• Define a clear page name, description and URL ID.
• Select and verify the correct locale before making changes.
• Configure the essential Page Settings, including localization, targeting, SEO, site search and page attributes.
• Understand the difference between the Main Region and a Boxed Layout.
• Build and organize a basic page structure using Page Designer components.
• Publish the completed page and verify the result on the appropriate Staging storefront.

Key principle

Configure first, build second, validate before going live.

Always confirm the locale you are working on before editing content. Configure the page through Page Settings before building its structure, and always verify the final result directly on the Staging storefront. Page Designer Preview is a useful design aid, but it should not be considered the final validation of the page.

Scope

This procedure focuses on the standard page creation workflow. It introduces the fundamental Page Designer concepts required to create a page independently without going into the detailed configuration of every available component.

More advanced topics, including individual component configuration, Content Blocks, media management, localization of existing content, and advanced targeting or scheduling, should be handled through their dedicated procedures or FAQs.

Important warnings before you start

Page Designer is a shared environment. Content created by HQ and subsidiaries is available within the same Page Designer library. Always verify what you are editing before making changes.

---

1. Always check your locale first

Never start editing a page without confirming the selected locale.

Page Designer will often open with default selected and does not automatically remember the locale you were previously working on.

Before configuring or building your page:

• Select the locale you intend to work on.
• Open Page Settings.
• Check the locale displayed directly underneath the Page settings title.

Editing the wrong locale can result in changes being made to content intended for other markets.

---

2. Do not create a new version of an existing structural layout

Not every Page Designer layout available under New is intended to be recreated.

Several layouts form part of the website's existing structure and should normally be edited rather than recreated. This includes layouts such as the Footer Page, Main Menu Page, Ribbon, Not Found Error Page, Search pages and other one-off layouts.

Always check the layout guidance provided in this procedure before creating a new page.

---

3. Use a clear and controlled page ID

The ID (URL Suffix) is generated from the page name and contributes to the page URL.

• Use a clear English page name when creating the page.
• Separate words in the ID using hyphens (-).
• Check the ID carefully before continuing.

Once the page has been created, the ID can be amended from Page Settings > General.

---

4. Page Designer Preview is not final validation

The Preview function provides a close representation of the page, but it should never be treated as confirmation that the page is working correctly on the storefront.

Always verify the completed page directly on the appropriate Staging storefront before considering your work complete.

---

5. Do not manage the sitemap from Page Designer

Under Page Settings > Site Search:

• Enable Page searchable in storefront when the page should be discoverable through storefront search.
• Leave Page included in sitemap unticked.

The sitemap is managed separately and should not be controlled from this Page Designer setting.

---

6. Publishing does not mean immediate Production visibility

Clicking Publish makes the content available for publication, but it does not mean that the page immediately appears on the Production storefront.

Published content becomes available to the public following the next push to Production, unless specific scheduling or targeting rules apply.

---

Remember

Correct locale > Page Settings > Build > Publish > Validate on Staging > Production push.

How to Create a New Page in Page Designer - Part 2

This is Part 2 of a two-part procedure explaining how to create a new page in Salesforce Commerce Cloud (SFCC) Page Designer.

Before continuing, complete How to Create a New Page in Page Designer - Part 1: Creation & Configuration.

Part 1 covers accessing Page Designer, creating the page, selecting the correct layout and locale, and completing the required Page Settings.

Part 2: Building, Publishing & Validation continues from that point and explains how to build the Page Structure, organize components, publish the page and perform mandatory validation on the Staging storefront.

If the page has not yet been created and configured, complete Part 1 before following the steps below.

---

Step 15: Move to Page Structure

Once all Page Settings have been configured, you can start building the page.

From the left navigation, click Page.

The Page Structure panel opens.

Page Structure shows how every layout and component is organized within the page. This becomes your main workspace for building and navigating your content.

A new Content Page starts with a Main Region.

---

Step 16: Understand the Main Region

The Main Region is the full-width area of the page.

It does not automatically introduce margins on the left or right. Any component that does not contain margins within its own settings can therefore occupy the entire width of the screen.

Use components directly inside the Main Region with parsimony.

A common approach is to:

1. Use the Main Region for a full-width introductory or header banner presenting the name or purpose of the page.
2. Use Boxed Layouts to contain most of the remaining page content.

Adding content to the Main Region

Click the + next to Main Region.

Page Designer displays the list of components and layouts available for that region.

---

Step 17: Understand Boxed Layouts

A Boxed Layout is a container with embedded margins.

Components placed inside a Boxed Layout are contained within those margins rather than automatically occupying the entire width of the screen.

If the component itself already contains margins, it keeps those margins inside the Boxed Layout.

Components dropped inside a Boxed Layout are responsive and their ratio is respected.

Use Boxed Layouts as chapters

Think of each Boxed Layout as a chapter in the story your page is trying to tell.

For example, a page could contain:

• A full-width introductory banner in the Main Region.
• A Boxed Layout for the introduction.
• A Boxed Layout explaining the main topic.
• A Boxed Layout presenting key information or benefits.
• A Boxed Layout containing supporting information.

This approach makes the content easier to structure and makes the Page Structure easier to understand and maintain.

---

Step 18: Add a Boxed Layout

1. Locate Main Region in Page Structure.
2. Click the + next to Main Region.
3. Select Boxed Layout.
4. The Boxed Layout is added to Page Structure.

The Boxed Layout contains a Body region. This is where the components forming that section of the page will be added.

---

Step 19: Rename the Boxed Layout

Do not leave every section named "Boxed Layout".

As a page becomes more complex, clear names make it significantly easier to understand where each component sits and to return to a specific section later.

1. Click Boxed Layout inside Page Structure.
2. A configuration panel opens on the right side of the screen.
3. Open the Settings tab.
4. Enter a clear name under Component Name.
5. Leave Targeting and Scheduling unchanged unless that specific section requires separate targeting or scheduling.
6. Click Apply.

For example, instead of:

Boxed Layout

Rename the section:

Introduction of my page

Other examples could include:

• Introduction
• Skin Science
• Key Benefits
• Product Selection
• Supporting Information

The purpose of naming is administrative clarity. Someone looking at Page Structure should be able to understand the organization of the page without opening every component.

---

Step 20: Add a Component Inside the Boxed Layout

Once the Boxed Layout has been created and renamed:

1. Locate your renamed Boxed Layout in Page Structure.
2. Locate Body underneath it.
3. Click the + next to Body.
4. Page Designer displays the components available for that region.
5. Select the component you want to add.

For this procedure, we will use a Textbox as a simple example.

---

Step 21: Configure the Textbox Component

The Textbox component allows you to enter and format text directly inside the page.

Enter the content

Inside the content field, enter the text you want to display.

The Textbox provides formatting options that can be used to structure the content.

This includes:

• Paragraph
• Heading 1
• Heading 2
• Heading 3
• Heading 4

These heading options are not simply visual formatting. They also provide the semantic heading structure used to organize the content of the page.

Use them logically to create a clear hierarchy within your content.

Rename the Textbox when useful

Open the Textbox Settings tab if you want to give the component a more descriptive name.

This is particularly useful on complex pages containing multiple text components.

For example, instead of leaving a component named:

Textbox

You could rename it:

Intro text

This provides even greater visibility inside Page Structure.

Once the content and settings are correct, click Apply.

---

Step 22: Continue Building the Chapter

You can add as many components as necessary inside the same Boxed Layout to complete that chapter of the page.

For each additional component:

1. Locate the relevant Body region.
2. Click the +.
3. Select the required component.
4. Configure its content and properties.
5. Rename it in Settings when doing so improves the readability of Page Structure.
6. Click Apply.

Keep components inside the same Boxed Layout when they belong to the same logical section of the page.

---

Step 23: Create the Next Chapter

Once the current section is complete, create a new Boxed Layout for the next chapter of the page.

Repeat the same structure:

Boxed Layout > Rename > Add components to Body > Configure components > Apply > Next Boxed Layout.

There is no required number of Boxed Layouts. The structure should follow the content and experience you are trying to create.

Do not create additional Boxed Layouts simply for the sake of having more sections. Each one should represent a meaningful chapter or grouping of content.

---

Step 24: Understand How Your Work Is Saved

Every time you click Apply, your work is saved automatically.

You do not need to look for a separate page-level Save button while building the page.

Develop the habit of clicking Apply whenever you finish configuring a component or layout.

Apply = Save your work.

---

Step 25: Use Preview While Building

The Page Designer canvas provides a visual representation of the page while you work.

You can also click Preview to see an almost complete representation of how the page should appear under real storefront conditions.

Use Preview throughout page creation to review the overall experience and identify obvious design or content issues.

However, Page Designer Preview must never be considered the final reality.

A page that looks correct in Preview must still be checked on the actual Staging storefront.

---

Step 26: Publish the Page

Once the page is complete, and assuming that no scheduled display has been configured, click Publish.

Publishing allows the content to be available to the public during the next push to Production.

Publishing does not mean that the page immediately becomes visible on the Production storefront.

Targeting or scheduling rules configured for the page can also determine when and to whom the page is displayed.

---

Step 27: Validate the Page on the Staging Storefront

This step is mandatory.

Never consider Page Designer Preview to be the final validation of your work.

Once your page has been built and published, open the actual page on the relevant Staging storefront and confirm that everything works as expected.

Standard Staging Storefront

The US Staging storefront is:

https://storefronts-staging-us.mobify-storefront.com/

For the other standard storefronts, replace us with the relevant market code:

• fr for France
• pl for Poland
• au for Australia
• de for Germany
• es for Spain
• uk for the United Kingdom

Italy Exception

Italy uses a different Staging address:

https://staging.teoxane.it/

---

Step 28: Use the Correct URL Structure for the Content Type

The URL used to validate content depends on the type of page you are checking.

Regular Content Page

Structure:

https://storefronts-staging-[market].mobify-storefront.com/[language]/page/[page-id]

Replace:

• [market] with the relevant market code.
• [language] with the relevant language code.
• [page-id] with the ID of the Page Designer page.

Example:

https://storefronts-staging-uk.mobify-storefront.com/en/page/skin-science

Patient Stories

Patient Stories overview:

https://storefronts-staging-uk.mobify-storefront.com/en/patient-stories

Specific Patient Story:

https://storefronts-staging-uk.mobify-storefront.com/en/patient-stories/patientstory_emilie

Before and After

Before and After overview:

https://storefronts-staging-uk.mobify-storefront.com/en/before-and-after

Specific Before and After:

https://storefronts-staging-uk.mobify-storefront.com/en/before-and-after/olivier-46-years-old

Product Listing / Category

Example:

https://storefronts-staging-uk.mobify-storefront.com/en/category/all-products

Expert Articles

Expert Overview:

https://storefronts-staging-uk.mobify-storefront.com/en/experts

Specific Expert Article:

https://storefronts-staging-uk.mobify-storefront.com/en/news/Things-to-ask-your-practitioner

FAQs

FAQ Overview:

https://www.teoxane.co.uk/en/faqs

Specific FAQ:

https://www.teoxane.co.uk/en/faq/What-is-RHA-resilient-hyaluronic-acid

Product Detail Page

Product URLs use the product SKU as the product ID.

If the SKU contains a /, replace it with a - in the URL.

Example:

• Product SKU: 700230/00
• URL ID: 700230-00

Product URL structure:

/[language]/product/[SKU-with-hyphen]

Example:

https://www.teoxane.co.uk/en/product/700230-00

---

Step 29: Perform the Final Quality Check on Staging

Open the page directly on Staging and review the complete storefront experience.

At minimum, confirm that:

• You are viewing the correct market.
• You are viewing the correct language and locale.
• The page loads using the expected URL and Page ID.
• The page is visible for the intended locale.
• The overall Page Structure appears as intended.
• Full-width sections behave as expected.
• Boxed Layout sections display with the expected margins.
• Text and headings display correctly.
• Images and other media display correctly.
• Links lead to the intended destinations.
• Calls to action lead to the intended destinations.
• Components display and behave correctly.
• Any configured targeting behaves as intended.
• Any configured scheduling behaves as intended.

Do not consider the page complete until it has been checked on Staging.

---

Procedure Complete

By completing Part 1 and Part 2, your page has now been:

1. Created using the appropriate Page Designer layout.
2. Configured for the correct locale.
3. Prepared with the required Page Settings.
4. Structured using the Main Region, Boxed Layouts and components.
5. Published in Page Designer.
6. Validated on the Staging storefront.

Once validated, the published content is ready for the appropriate Production push.

---

Key Rules to Remember

• Part 1 is a prerequisite for Part 2. Do not start building a newly created page before completing its configuration.
• Always check your locale before editing. Never assume Page Designer remembered the locale you were previously working on.
• Page Settings comes before Page Structure.
• Use the Main Region selectively. It is a full-width region.
• Use Boxed Layouts as chapters. They should form the main structure of most standard content pages.
• Rename important Boxed Layouts and components. Clear names make complex pages easier to understand and maintain.
• Apply = Save. Clicking Apply saves the changes made to a component or layout.
• Preview is not final validation.
• Always validate on the actual Staging storefront.
• Publish does not mean immediately live on Production. Published content becomes available for the next Production push, subject to any targeting or scheduling rules.

Complete workflow across both procedures:

Search > Create > Select Locale > Page Settings > Build > Apply > Preview > Publish > Validate on Staging > Production.