Create a layout for a page

We can create layouts for the pages managed in the Commerce Composer tool. This process involves assigning the layout to one or more pages, adding widgets to the layout, and defining the properties and content of each widget. We can then preview the layout in store preview and make refinements.


Before beginning

Depending on the type of page that we are creating the layout for, we might need to do some prerequisite steps.

Layout Prerequisite steps
A content page layout Create the page in the Commerce Composer tool if the page does not exist. See Creating a content page.
A category page layout

A catalog entry page layout


Procedure

  1. Open the Commerce Composer tool.

  2. Do one of the following things:

    • If we are assigning the layout to a category or catalog entry page, complete these steps:

      1. In the explorer view (left pane), expand Catalog Pages for store until you locate the page.

      2. Right-click the page, and then click New Layout.

    • If we are assigning the layout to a content page, complete these steps:

      1. In the explorer view (left pane), click Content Pages.

      2. In the work area (right pane), right-click the page, and then click New Layout.

  3. In the New Layout Template Selection window, select the template to use for the layout, and then click OK.

  4. Complete the following fields:

      Option Description
      Layout name Name for this layout, for example, HalloweenLandingPageLayout.
      Folder Specify one or more folders in which to include this layout. From the explorer view, drag a subfolder of the Layouts folder into this table. If you do not specify a folder, this layout is included only in the Layouts folder.
      Priority Assign a priority by entering a number between zero (lowest priority) and one thousand (highest priority). If more than one layout is assigned to or inherited by a page for a given time period, the layout with the highest priority is applied on the storefront.

      For example, the page might have an existing layout assigned indefinitely with a priority of 1. If we want this new layout to override the existing layout temporarily for a week, give this layout a priority of 2 and set the start date and end date for the target week. During the target week, this new layout will be displayed to customers instead of the existing layout.

      Start date Specify a start date and time for this layout assignment. If you do not specify a start date, the layout is assigned immediately.
      End date Specify an end date and time for this layout assignment. If you do not specify an end date, the layout is assigned indefinitely.

  5. In the Pages table, check that your page is listed.

  6. If the Pages table contains a category or catalog entry page, from the Assign Layout To column, select the option that makes sense for our layout assignment.

  7. To assign this layout to more pages:

    1. In the field above the Pages table, type the page name. Tip: For catalog entry or category pages, type the code or name of the catalog entry or category, for example, Tableware.

    2. Click the arrow on the Find and Add button, and then select the page type.

    3. Click Find and Add.

  8. Optional: To use this layout also as a search results page for a specific search term:

    1. Above the Search terms table, click

      Add a Search Term.

    2. In the Search Term column, type the search term. When customers search the site using this search term, this layout will be displayed instead of the default search results page. Include all variations of the term that you expect customers to use. For the layout to be assigned, the customer's search term must be an exact match to the search terms that you specify.

    3. To add more search terms, click

      Add a Search Term to add more rows to the table.

  9. Click the Design Layout tab.

  10. Add widgets to the slots in the layout:

    The wireframe shows the layout template that we selected. To add content to the layout, add widgets to one or more slots in the layout template. We can add more than one widget to a slot, and we can leave slots empty.

    1. In the wireframe, click any slot.

    2. Optional: Use the Filter by fields to filter the list of widgets. For example:

      • In the first Filter by field, type the first few letters of the widget name.

      • In the second Filter by field:

        • Select Category page widgets to display widgets that are suited to category pages.

        • Select Widgets for any page to display widgets that are suited to content pages.

    3. Select a widget and click OK.

    4. Set the widget properties, and define the widget content, if required.

    5. To preview the store page containing the widget, click Save and Preview.

    6. If the Store Preview Options window is displayed:

      1. From the Store URL list, select the page to preview.

      2. Expand Options, click Specify the date and time, and then specify the start date for your layout.

      3. Click Launch Store Preview.

    7. In store preview, review your layout.

      To get information about the widgets in the layout, click Show Page Information at the top of the preview window. Then, click Show Information over the widget that we are interested in.

    8. To add more widgets to your layout, repeat steps 10.a to 10.g. Tip: You do not need to close and relaunch store preview after each change we make to the layout. Instead, keep store preview open and reload the store preview window after you save changes to the layout. To reload the store preview window, click F5 on your keyboard.

  11. When we are finished with the layout, click Save.


Related concepts
Layouts, layout templates, and default layouts
Layout assignments for category pages
Layout assignments for catalog entry pages
Layout assignments for search terms


Related tasks
Creating a layout for a search term
Populating tabbed slots in layout templates
Viewing the list of layouts assigned to a page
Copying a layout
Viewing information about widgets in store preview
Viewing information about pages and layouts in store preview