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 1

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

Part 1: Creation & Configuration covers access to Page Designer, page creation, layout selection, locale selection and the complete configuration of Page Settings.

Once Part 1 is complete, continue with How to Create a New Page in Page Designer - Part 2: Building, Publishing & Validation.

Both parts must be completed to finish the page creation process.

---

Step 1: Access Page Designer

From Merchant Tools, access Page Designer using either of the following methods:

1. From the left navigation, go to Content > Page Designer.
2. If Page Designer was previously added to your Merchant Tools Favorites, click Page Designer directly from Merchant Tools Favorites.

Both options open the same Page Designer library.

Understand the shared Page Designer library

Page Designer contains content shared across the different Teoxane stores. You will therefore see pages created by HQ and other markets, not only pages belonging to your own store.

Do not assume that a page belongs to your market simply because you can see it.

How to find an existing page

Use the Search field located on the far right of the Pages screen, above the Date Created column, to find existing content.

Filtering capabilities are not native to SFCC for our use case. Additional filters would require custom development and could disappear or become incompatible following a future SFCC release. For this reason, Teoxane chose not to invest in custom filters.

The Search field is therefore your main and most reliable way to find content you want to edit or localize.

Before creating anything new, search the library to make sure that the page does not already exist.

---

Step 2: Start Creating a New Page

From the Page Designer Pages screen:

1. Click New in the upper-right corner, next to Export PD and Getting Started.
2. The Create New Page window opens.
3. Select the layout corresponding to the type of content you want to create.

Important: The presence of a layout in the Create New Page window does not mean that you should create a new version of it. Some layouts are intended for regular content creation, while others are one-off elements of the website structure that already exist.

---

Step 3: Select the Correct Page Designer Layout

Use the following guide to determine which layout should be selected.

Layout	What it is / When to use it
AI Skin Analysis Result Page	One-off layout created for the AI Skin Analysis tool. Do not create a new one.
Before and After Article Page	Creates individual Before & After articles. Assign them to the Before and After folder to automatically populate the Real Life Results page. They can also be displayed on regular Content Pages.
Blog Article Page	Creates individual expert articles. Assign them to the Expert Articles folder to automatically populate the Expert Overview page.
Content Overview Page	One-off layout forming part of the website's overall backbone, including the header and footer structure. Already configured. Do not create another one.
Content Page	The go-to layout for content creation, from simple pages to more complex experiences. It supports most Page Designer components and can also incorporate other layouts.
FAQ Article	Creates individual FAQ entries. Assign them to the FAQ Articles folder to automatically populate the FAQs Overview page.
Footer Page	Controls the website footer. Do not create a new footer. Edit the existing Footer Page when changes are required.
Main Menu Page	Controls the website's main navigation. Do not create a new Main Menu. Edit the existing one when changes are required.
Not Found Error Page	Controls the content displayed on the 404 / Page Not Found page. It already exists, so edit the existing page if changes are required.
Patient Story Page	Creates individual patient testimonials. Assign them to the Patient Stories folder to automatically populate the Patient Stories page. They can also be displayed on regular Content Pages.
Product Detail Layout	Controls the Page Designer content of a Product Detail Page. HQ handles layouts for new product launches, so markets should not create these in advance. Markets may use this layout for specific needs such as bundles.
Product List Page	Creates pages displaying a listing or gallery of products, for example products addressing a specific concern. Discuss new listings with HQ first to avoid duplicating existing listings.
Popup	Controls popup content that can be adapted to market needs. Multiple duplicate popups are generally unnecessary. Coordinate with HQ before creating additional ones and reuse or edit the existing setup where possible.
Reassurance Block	Legacy layout previously used for commercial reassurance messages on Product Detail Pages, such as payment methods, shipping or other purchase information. No longer required for new content, as these messages can now be designed directly within the Product Detail Layout.
Ribbon	Controls the carousel of messages displayed at the top of the website. The Ribbon already exists in the library. Do not create a new one. Edit the existing Ribbon.
Search: No Results Page	Controls the page displayed when a user's search returns no results. Already created, so edit the existing page if changes are required.
Search: Search Suggestions	Controls the search suggestion experience. It is part of the website's core setup and already exists. Discuss changes with HQ before amending it.

Which layout should I use for a normal page?

For a standard website content page, select Content Page.

The remainder of this procedure uses Content Page as the example.

---

Step 4: Define the General Page Information

After selecting Content Page, Page Designer asks you to define the general information for the new page.

Page Language

Leave Page Language set to default when creating the original page.

Name

Enter a clear, transparent and descriptive name in English.

The name should allow any administrator to immediately understand what the page contains. Think of the Name as if you were already preparing the Meta Title for the page.

What is a Meta Title? A Meta Title describes the subject of a webpage to search engines and is commonly displayed as the main clickable title of a search result.

Example: Training Page

ID (URL Suffix)

Page Designer builds the ID based on the Name you entered. This ID contributes to the URL of the page.

Review the generated ID and edit it so that words are separated using hyphens (-).

Example:

• Name: Training Page
• ID: training-page

Do not leave multiple words joined together in the ID.

Description

Enter a concise description explaining what users will find on the page.

Think of this Description as if you were already preparing the future Meta Description.

What is a Meta Description? A Meta Description is a short summary of a webpage. Search engines may display it underneath the page title in search results to help users understand what the page contains.

Example: Discover everything you need to know about content design on Page Designer.

Once the information is complete, click Next.

---

Step 5: Review the Page Information Before Creation

Page Designer displays a confirmation screen containing the information you entered.

Review:

• Page Layout
• Page Language
• Name
• ID (URL Suffix)
• Description

If anything needs to be corrected, click Edit next to the relevant field.

Pay particular attention to the Name and ID.

Once everything is correct, click Save & Create.

---

Step 6: Understand the Page Designer Workspace

Page Designer now opens the new page.

A mostly blank canvas appears with the website header and footer visible. The central area is where your content will be built.

The left side of Page Designer contains five main options:

Option	Purpose
Page	Shows the Page Structure as you build the page. This is the main place used to build and organize the page.
Content Blocks	Contains previously saved individual components or groups of components that can be reused elsewhere. This is an advanced design approach. Master standard Page Designer creation before using Content Blocks.
Components	Displays the available components. The same component selection is also accessible directly from Page Structure, so this section rarely needs to be used independently.
Manage Media	Contains the media assets available for your locale. Media management is covered in a dedicated article.
Page Settings	Controls the page configuration, including localization, targeting, SEO, site search and attributes. This should be your first stop before building the page.

Remember: Page Settings configures the page. Page Structure builds the page.

---

Step 7: Select the Correct Locale Before Doing Anything Else

This is one of the most important steps in the entire Page Designer workflow.

A newly created page will generally open with default selected in the locale dropdown.

Page Designer does not remember the locale you were previously working on before creating the page.

Your first reflex must therefore be to select the locale you intend to configure.

1. Locate the locale dropdown at the top of Page Designer, next to Visible for this locale.
2. Open the dropdown.
3. Select the locale you intend to work on.

Example: when working on the Italian storefront, select Italian (Italy).

Do not begin configuring or building the page while default is selected unless you intentionally need to modify the default locale.

---

Step 8: Open Page Settings and Confirm the Locale Again

From the left navigation, click Page Settings.

Directly underneath the Page settings title, Page Designer displays the locale you are currently working on.

Check this locale before changing anything.

This provides a quick second confirmation that you are working on the correct market and helps prevent accidental changes to another market's locale.

Page Settings contains six tabs:

• General
• Localization
• Targeting
• SEO
• Site Search
• Attributes

---

Step 9: Review General Settings

Open Page Settings > General.

The General tab displays the ID (URL Suffix) and Page Type.

This is your opportunity to amend the ID after the page has been created.

Review the ID and confirm that it is correct, understandable and uses hyphens between words.

Example: training-page

The ID contributes to the URL that will be used to access the page.

---

Step 10: Configure Localization

Open Page Settings > Localization.

This tab contains:

• Page Visible for this Locale
• Name
• Description

Page Visible for this Locale

This setting controls whether the page is visible for the locale currently selected.

Always confirm the locale displayed at the top of Page Settings before changing visibility.

Name and Description

Ideally, keep the Name and Description in English.

The Page Designer library is shared across Teoxane markets. Keeping these administrative fields in English allows administrators from other subsidiaries to understand what the page is about.

Do not confuse these administrative fields with SEO information. The SEO Title and Description configured later should be written in the language of the local storefront.

---

Step 11: Configure Targeting When Required

Open Page Settings > Targeting.

Targeting provides multiple levels of control over who can access the page and when it should be displayed.

Campaign or Promotion

A page can be assigned to a Campaign or Promotion.

If the page is assigned to a Campaign or Promotion, its availability follows the targeting and scheduled display defined through that configuration.

Customer Groups

Customer Groups can be useful when content needs to distinguish between audiences such as:

• Registered users
• Unregistered users

The Everyone option does not provide a useful override when targeting has already been configured through an assigned campaign.

Selecting Everyone does not override the targeting rules of the campaign.

Schedules

Display From and Display To allow you to define the date and time during which the page should be displayed.

Use these fields when the page should only be visible during a specific period.

If the page does not require Campaign or Promotion targeting, Customer Group restrictions or scheduled display, leave these settings unchanged.

---

Step 12: Configure SEO in the Local Language

Open Page Settings > SEO.

Unlike the administrative Name and Description, the SEO information must be written in the language of your local storefront.

Page Address (URL)

Leave Page Address (URL) empty.

Page Title

Enter the Page Title in the local language.

This is the title used to describe the page to search engines and can be displayed as the main title in search results.

It should clearly and accurately represent the content of the page.

Page Description

Enter the Page Description in the local language.

This provides a concise summary of the page and can be displayed by search engines to help users understand what they will find on the page.

Meta Keywords

Add relevant keywords associated with the content of the page. The field accepts a maximum of 10 keywords.

Use keywords that genuinely reflect the page content.

---

Step 13: Configure Site Search

Open Page Settings > Site Search.

Page searchable in storefront

Tick Page searchable in storefront so the page can be found through the website's internal search when appropriate.

Page included in sitemap

Do not tick Page included in sitemap.

The sitemap is managed elsewhere and should not be controlled through this Page Designer setting.

Search Keywords

Add terms that should help the storefront search identify the page.

You can reuse the keyword list prepared in the SEO tab.

Keywords can include:

• Short-tail keywords: short, broad search terms.
• Long-tail keywords: longer and more specific search phrases.

---

Step 14: Complete the Attributes

Open Page Settings > Attributes.

Image

Add an image representing the page.

Do not skip this field.

This is the image the system can use when:

• The page is referenced from another page.
• The page is shared on social media.

Select an image that appropriately represents the content of the page.

Notes and References

Use Notes and references to document information required to support or qualify the content of the page.

Where applicable, include:

• Disclaimers
• Legal mentions
• Scientific references
• Studies supporting claims made on the page

This information supports the governance and traceability of the content.

Once the Page Settings are correctly configured, click Save.

---

Part 1 Complete: Continue to Part 2

You have now:

• Accessed Page Designer.
• Created the correct type of page.
• Defined the Name, ID and Description.
• Selected and confirmed the correct locale.
• Configured General settings.
• Configured Localization.
• Reviewed Targeting and Scheduling.
• Configured local SEO.
• Configured Site Search.
• Completed the page Attributes.

The page creation process is not complete.

Continue with How to Create a New Page in Page Designer - Part 2: Building, Publishing & Validation.

Part 2 explains how to build the Page Structure using the Main Region, Boxed Layouts and components, how Page Designer saves your work, how to publish the page and how to perform the mandatory final validation on the Staging storefront.

Do not consider the page ready until Part 2 has also been completed.