Create a layout for a search term

We can create a layout that overrides the default search results page for a specific search term. For example, we can design a unique layout displayed whenever a customer searches for cameras to make the search results page more relevant to camera enthusiasts.


Before beginning

Read Layout assignments for search terms.

Under the Layouts folder in the explorer view, create a folder to store layouts in.


Procedure

  1. Open the Commerce Composer tool.

  2. From the toolbar, click the arrow on the right side of Create New; then select 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 Search terms table, specify one or more search terms:

    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.

  6. Click the Design Layout tab.

  7. 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 Search results page widgets to display widgets that are suited to search results 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. Store preview opens to the home page.

    6. In the search field, type the search term to which you assigned the layout. The search results page uses the layout that you assigned.

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

    8. To add more widgets to slots, repeat steps 7.a to 7.g.

  8. 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
Create a layout for a page
Populate tabbed slots in layout templates
View the list of layouts assigned to a page
Copy a layout
View information about widgets in store preview
View information about pages and layouts in store preview