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.

1. Click App Launcher , and then select Merchant Tools | site | Content | Page Designer.
2. Click New.
3. Select a page layout.
4. If necessary, select how you want to use the page.
   For example, if you’re using a dynamic layout that applies to Product List and Product Detail pages, select which kind of page you want to create.
5. If you’re creating a Product List or Product Detail template page, select the categories that you want to assign to the page.
   When you assign a category to a page, all subcategories are implicitly assigned to the same page unless you explicitly change the assignment for a subcategory. You can assign a category to only one Product List and only one Product Detail page. You can skip the category assignment step during page creation and assign or change the categories later in Page Settings. For more information about creating a Product List or Product Detail template page, see Create a Product List or Product Detail Page Template for Page Designer.
6. Select a Page Language.
   A best practice is to create the page in your base language, typically the default. Page Designer adds a variation of the page for each locale in the fallback hierarchy defined in Business Manager. Then use the page variations to localize components for each locale as needed. Components not localized display according to the fallback hierarchy defined in Business Manager.
7. Enter a name and ID for the page.
   The ID must be unique among all pages and content assets. To change a page's ID later, open the page, click the Page Settings icon, and edit the ID on the General tab.
8. (Optional) Enter a description for the page.
9. Review the information you entered.
   To make changes, click Edit next to the information you want to change.
10. When all the information is correct, click Save & Create.
    The new page appears in the Visual Editor. Some dynamic pages display information based on the category or product being rendered. Typically, information from the first category assigned to the page appears. If no category or product appears on the page, or to see a different category or product, click the Preview Settings icon at the top of the page. Select a category or enter a product SKU for Dynamic Attributes, and click Apply. Images and text specific to the category or product selected appear on the page.
11. To add components to the page, click the icon to open the Components menu.
    If the developer assigned default components to regions, those components are prepopulated on the page. Change or remove the default components. You can also copy up to 10 components at a time and paste them across pages (if the target region or component accepts the component).
12. Select a component type, and drag it into a region on the page.
    The component is added to the page, but with no attributes configured.
13. In the right pane, configure the component attributes.
    When using the rich text editor, you can format text using the Heading1, Heading2, Heading3, Heading4, and Paragraph tags. When the page appears in the storefront, the text’s formatting corresponds to the styles in the browser’s CSS. To open a larger window in which to edit the text, click the icon.
    Some components have dynamic attributes that by default use the category or product being rendered to determine which contents to display. To override the category or product passed to the page, click the edit icon next to Value assigned to page. Select a different category.
    Components support content asset binding. To bind a component's attributes to content asset attributes instead of entering content directly, click Select Content Asset. For more information, see Bind Component Attributes to Content Assets.
14. To specify for which customers and when a component is visible, click the dropdown menu next to the component's name in the right panel.
    By controlling the visibility, you can add more than one component to a region.
    1. To show the component to specific customer groups, select Customer Groups.
    2. To specify the date and time for which you want the component to be visible, select Schedule.
    3. Select which customer groups and the date and time for which you want the component to be visible, and click Apply.
       The times correspond to the timezone of your site.
15. Click Save.
16. Add one or more components to every region of the page.
    Some components have regions to which you must add more components.
17. To see how the page looks for specific customers on certain dates, from different source codes, or with different dynamic attributes, click the view icon. Adjust the settings, and click Preview.
18. To see how the page looks on different devices, click the viewport icons.
19. To adjust the dimensions of the preview, click the edit icon , and enter the width and height in pixels.
    If you enter values that are larger than the pixel dimensions of the screen on which you’re working, sometimes the width and height don’t scale correctly. If you enter custom values for the dimensions, sometimes you can’t position components on the page correctly. To automatically calculate the pixel values, click the edit icon again.
20. To switch between portrait and landscape, click the rotate icon.
21. When you're satisfied with how the page looks, click Publish to make the page available online.