You are here:
Page Designer for B2C Commerce
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 Binding Components to Content Assets.
- Create a Page Using the Page Designer Visual Editor
A page creation wizard walks you through the process of creating a Page Designer page in the visual editor. This topic applies to B2C Commerce. - Page Designer Visual Editor Tips
The following tips have been collected through customer feedback, and are helpful to know when building Page Designer pages using the Visual Editor. This topic applies to B2C Commerce. - 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 storefront, the template page assigned to the category appears, populated with the appropriate product information. This topic applies to B2C Commerce. - Configure Custom Page Attributes for Page Designer
If the developer created custom page-level attributes for a page type, you can configure the attributes under Page Settings. This topic applies to B2C Commerce. - Copy a Page Designer Page
You can make a copy of a 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. This topic applies to B2C Commerce. - 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 Page Designer pages. - Binding Components to Content Assets
Instead of entering content directly into a component, bind the component's attributes to content asset attributes. Use this approach to reuse content across multiple pages and update it from a single location. This topic applies to B2C Commerce. - Preview Page Designer Pages
Check how a 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. This topic applies to B2C Commerce. - Change the ID for a Page Designer Page
Edit the ID for a Page Designer page. This topic applies to B2C Commerce. - 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 Page Designer pages. (Available in the 24.4 release) you can add up to 1000 images per folder. This topic applies to B2C Commerce. - Delete a Page Designer Page
When you’re finished with a Page Designer page, delete it. This topic applies to B2C Commerce. - Organize Page Designer Pages in Folders
Assign Page Designer pages to one or more content library folders. This topic applies to B2C Commerce. - Specify When a Page Designer Page Is Visible Based on Customer Group or Schedule
Configure a 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. This topic applies to B2C Commerce. - Specify Which Page Designer Component Is Visible in a Region Based on Customer Group or Schedule
Configure a region on a page to hold more than one component. Then specify which component is visible to which customers or which component is visible during certain dates and times. Times correspond to the timezone of that site. When you use a page from the shared library, scheduled pages and components are visible in all sites at the same point in time, regardless of geolocation. Editing the component schedule from another site shows you the time in the timezone of that site. - Target a Page Designer Page for a Campaign or Promotion
When you target a 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. This topic applies to B2C Commerce. - Target a Page Designer Component for a Campaign or Promotion
When you target a 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. This topic applies to B2C Commerce. - Manage Component Visibility on Product List and Product Detail Template Page Designer Pages
On a 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. This topic applies to B2C Commerce. - Set the Locale for Page Designer Visual Editor
Specify the locale for which you’re editing pages. This topic applies to B2C Commerce. - Export Elements for Bulk Localization for Page Designer
To speed up the localization process, export the localizable elements of one or more pages with custom jobs. This topic applies to B2C Commerce. - 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 Business Manager. Then use the page variations to localize components for each locale as needed. This topic applies to B2C Commerce. - Export Localizable Elements for Bulk Localization for Page Designer
To speed up the localization process, configure localization export and import using two API jobs. This topic applies to B2C Commerce. - 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 Business Manager. This topic applies to B2C Commerce. - Import Elements for Bulk Localization for Page Designer
To speed up the localization process, import the localized elements of one or more pages with custom jobs. This topic applies to B2C Commerce. - Enable Searching for a Page Designer Page
Configure a Page Designer page so that customers can easily find it. This topic applies to B2C Commerce. - Configure SEO Settings for a Page Designer Page
Enter SEO settings for a Page Designer page. This topic applies to B2C Commerce. - Create a Search-Driven Redirect for a Page Designer Page
To return a specific Page Designer page when a customer searches on a particular keyword, create a search-driven redirect and specify the page ID as the Content ID. This topic applies to B2C Commerce.
Did this article solve your issue?
Let us know so we can improve!
