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.

1. Select Merchant Tools > 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 are 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 are 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.
6. Select a Page Language.
   A best practice is to create the page in your base language, typically the default. A variation of the page is added for each locale in the fallback hierarchy defined in Business Manager. You can 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.
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 is displayed 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 is displayed. If no category or product is displayed on the page, or if you want 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 are displayed on the page.
11. To add new components to the page, open the Components menu by clicking the icon.
    If the developer assigned default components to regions, those components are prepopulated on the page. If you want, you can change or remove the default components.

    Note: Unfortunately, there’s no UI feature available to copy a component across pages at at this time.
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 is displayed 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.
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 customer's browser time, not the instance time.
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 are 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.