Page Designer is a B2C Commerce feature that supports standard development processes and tools for creating reusable page types and component types. Merchants can use a visual editor in Business Manager to design, schedule, and publish custom pages in the storefront by dragging the page and component types.
Merchants can use the same page and component types to create a variety of pages independently, without going back to the developer for updates. The typical Page Designer implementation process includes these steps.
- The ecommerce marketing director meets with the developer to discuss the pages, components, layouts, and assets required for the storefront.
- The developer creates the reusable page types and component types that support the ecommerce marketing director's requirements.
- The developer uploads the custom cartridge that contains the page and component types and another custom cartridge that contains supporting UI artifacts to a site.
- The merchant uses the Page Designer visual editor in Business Manager to build storefront pages using the page and component types that the developer has implemented.
Page Designer also supports content asset data binding, which allows components to dynamically pull content from content assets. This means you can reuse the same content across multiple pages and update it from a single location. For more information, see Content Asset Data Binding in Page Designer.
- Create a Page Using the Page Designer Visual Editor
A page creation wizard walks you through the process of creating a B2C Commerce Page Designer page in the visual editor. - Page Designer Visual Editor Tips
The following tips have been collected through customer feedback, and are helpful to know when building B2C Commerce Page Designer pages using the Visual Editor. - Create a Product List or Product Detail Page Template for Page Designer
Create a Product List or Product Detail page template to reuse across multiple categories and products. Create the template page with the structure and components you want to use, and then assign that page to one or more categories. When a Product List or Product Detail page is required in the B2C Commerce storefront, the template page assigned to the category appears, populated with the appropriate product information. - Configure Custom Page Attributes for Page Designer
If the developer created custom page-level attributes for a B2C Commerce Page Designer page type, you can configure the attributes under Page Settings. - Copy a Page Designer Page
You can make a copy of a B2C Commerce Page Designer page. The copy has all the same page settings and content as the original, except the copy has a different page ID. Copying an existing page can improve your efficiency since you don't start from scratch every time you create a page. - Copy Page Designer Components
Copy up to 10 components at a time. Paste a copied component into any region or component that accepts it. Copying components helps make sure consistent site-wide experiences when building B2C Commerce Page Designer pages. - Content Asset Data Binding in Page Designer
With content asset data binding, you author a piece of content once and reuse it across many B2C Commerce Page Designer components and pages, so a single edit to the content asset updates everywhere it appears. Learn what data binding does, its benefits, how to make more attributes bindable, and how visibility and localization behave. - Preview Page Designer Pages
Check how a B2C Commerce Page Designer page looks for specific customers on certain dates and how the page looks when a customer gets to the page using a URL that specifies a particular source code. You can also preview how the page appears on different devices, with custom pixel dimensions, and in landscape or portrait orientation. - Upload and Manage Files in the Content Library for Page Designer
Use the Media Manager to manage files in your content library. These files are available to you as you create B2C Commerce Page Designer pages. (Available in the 24.4 release) you can add up to 1000 images per folder. - Delete a Page Designer Page
When you’re finished with a B2C Commerce Page Designer page, delete it. - Organize Page Designer Pages in Folders
Assign B2C Commerce Page Designer pages to one or more content library folders. - Specify When a Page Designer Page Is Visible Based on Customer Group or Schedule
Configure a B2C Commerce Page Designer page to be visible only to certain customers or only during certain dates and times. If you’ve targeted the page to be part of a campaign or promotion, this functionality isn’t available. In that case, the campaign or promotion you assign determines the customer group and schedule, if any. Also build customer groups to include, or exclude, specific regions or locales. - Set Component Visibility by Customer Group, Schedule, or Locale
You can use Page Designer to control which components appear on a B2C Commerce storefront. You can select which components are visible to specific customer groups. You can also set components to appear only during certain times or for specific locales. - Target a Page Designer Page for a Campaign or Promotion
When you target a B2C Commerce Page Designer page for a campaign or promotion, any visibility rules you’ve configured for the page based on customer group or schedule are overridden. If the campaign or promotion you assign to the page includes visibility rules based on customer group or schedule, those rules are used for the page. - Target a Page Designer Component for a Campaign or Promotion
When you target a B2C Commerce Page Designer component for a campaign or promotion, any visibility rules you’ve configured for the component based on customer group or schedule are overridden. If the campaign or promotion you assign to the component includes visibility rules based on customer group or schedule, those rules are used for the component. - Manage Component Visibility on Product List and Product Detail Template Page Designer Pages
On a B2C Commerce Page Designer Product List or Product Detail template page that uses category as its dynamic attribute, you can configure which components appear on a page based on the category being rendered. For example, specify that a certain component appears when the category is women’s clothes and a different component appears when the category is electronics. - Set the Locale for Page Designer Visual Editor
Specify the locale for which you’re editing B2C Commerce Page Designer pages. - Export Elements for Bulk Localization for Page Designer
To speed up the localization process, export the localizable elements of one or more B2C Commerce Page Designer pages with custom jobs. - Manage Localization for a Page Designer Page
When adding a page in Page Designer, create it in your base language, typically your default locale. When you create the page, Page Designer adds a variation for each locale in the fallback hierarchy defined in B2C Commerce Business Manager. Then use the page variations to localize components for each locale as needed. - Export Localizable Elements for Bulk Localization for Page Designer
To speed up the B2C Commerce Page Designer localization process, configure localization export and import using two API jobs. - Export Localizable Elements Using Folders for Page Designer
To speed up your localization process, define pages in need of bulk translation. There are multiple ways to do this, such as by manually creating a file containing the page IDs in JSON string format. The simplest method is to assign pages to a dedicated content folder through B2C Commerce Business Manager. - Import Elements for Bulk Localization for Page Designer
To speed up the localization process, import the localized elements of one or more B2C Commerce Page Designer pages with custom jobs. - Enable Searching for a Page Designer Page
Make a B2C Commerce Page Designer page discoverable in storefront site search. In Page Settings, mark the page searchable, add it to the sitemap, and assign search keywords so customers find it when they search your storefront. - Configure SEO Settings for a Page Designer Page
Set the search-engine optimization metadata for a B2C Commerce Page Designer page, including its URL, page title, meta description, and meta keywords, so external search engines index and rank the page. This procedure doesn't apply to dynamic Product Detail or Product List pages, which use Page Meta Tag Rules instead. - Create a Search-Driven Redirect for a Page Designer Page
Route a storefront search to a specific B2C Commerce Page Designer page. In Business Manager Search, create a search-driven redirect that maps one or more keywords to the page's ID as the Content ID.