Create a Page Using the Page Designer Visual Editor

When creating a page in Page Designer, a best practice is to create it in your base language, typically default. A variant of the page is added for each locale in the fallback hierarchy defined in Business Manager. You can then use the page variants to localize components for each locale as needed. Components not localized display according to the fallback hierarchy defined in Business Manager.

To create and manage pages using the Page Designer visual editor, a user's role must include functional permission Manage_All_Libraries in the organization context or Manage_Site_Library in the context of the site for which they are creating pages.
  1. Select Merchant Tools > Content > Page Designer.
  2. Click New.
  3. Select a locale for the page.
  4. Enter a name and ID for the page.
  5. (Optional) Enter a description for the page.
  6. Select a page type.
  7. Click Save & Create.
  8. Open the Components menu by clicking. Icon for Components menu.
  9. Select a component type, and drag it into a region on the page.
    The component is created and added to the page, but with no attributes configured.
  10. 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 is formatted as specified by the corresponding styles in the browser's CSS.
  11. To specify for which customers and when a component is visible, next to its name in the right panel, click the dropdown menu.
    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.
  12. Click Save.
  13. Add one or more components to every region of the page.
    Some components might have regions to which you must add more components.
  14. To see how the page looks for specific customers on certain dates, click the view icon, select the customer groups and dates, and click Preview.Preview function to show how page will look for certain customers on certain dates.
  15. To see how the page looks on different devices, click the viewport icons. Icon for viewports.
  16. To adjust the dimensions of the preview, click the edit icon Icon for editing.and enter the width and height in pixels. Fields for entering pixel dimensions.
    If you enter values that are larger than the pixel dimensions of the screen on which you are working, the width and height might not scale correctly. If you enter custom values for the dimensions, you might not be able to use drag-and-drop to correctly position components on the page. To automatically calculate the pixel values, click the edit icon again.
  17. To toggle between portrait and landscape, click the rotate icon. Icon for rotating image.
  18. When you're satisfied with how the page looks, click Publish to make the page available online.
X Privacy Update: We use cookies to make interactions with our websites and services easy and meaningful, to better understand how they are used. By continuing to use this site you are giving us your consent to do this. Privacy Policy.