Feature Pack 7 or later

Creating a layout for a page

You can create layouts for the pages that you manage 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. You can then preview the layout in store preview and make refinements.

Alternatively, you can have an administrator use the Data Load utility to create a layout for a page. For a sample that demonstrates how to create a layout and assign a layout to a page, see
Feature Pack 8Note: If you need to copy a Commerce Composer layout or layout assignment from one instance to another instance, you can use the Data Extract and Data Load utilities. Use the Data Extract utility to extract the layout data and then use the Data Load utility to load the extracted data into the target instance. For more information, see Extracting Commerce Composer data with the Data Extract utility.

Before you begin

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

Prerequisites for creating layouts
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 you 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 you 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:
    OptionDescription
    Layout name Type a 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 you 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 your 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 TermAdd a Search Term.
    2. In the Search Term column, type the search term. When customers search your 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 TermAdd 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 you selected. To add content to the layout, you must add widgets to one or more slots in the layout template. You can add more than one widget to a slot, and you 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 that contains 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 you 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 you 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 you are finished with the layout, click Save.