---
schema_version: "1"
id: c841aa9a927215f73ad87904993930b3d05808a622c61b1489ab59efc7aa723f
title: Set Up a Product List Page Search Layout
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/commerce/264-0-0/rt_cms_layouts_settings_product_search.md
canonical_url: https://help.salesforce.com/s/articleView?id=commerce.rt_cms_layouts_settings_product_search.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: b1011f891bdca830e293e1d81cad1266c95bc9b98492169f5675817fcb0dd9ee
description: The look and feel of the Point of Sale search results screen (aka PLP) is controlled by app config settings and the Search Layout associated with the app config.
products:
  - Commerce
release: "264"
---
# Set Up a Product List Page Search Layout

The look and feel of the Point of Sale search results screen (aka PLP) is controlled by app config settings and the Search Layout associated with the app config.

## Set the App Config Search Layout

There are several settings in the app config that affect the search screen:

1. Go to your app config and click EDIT.
2. Go to **UI** | **SEARCH LAYOUTS**.

The layout available include:

- **Search Layout (V1)** - The Search Layout contains various settings.
- **No Search Results Layou**t - This shows a custom layout when there are no search results.
- **Default Search Display Style** - This shows search results as a list or as a grid (typically grid).
- **Search Layout Grid Type** - This specifies the number of columns to be shown (one, two, or three).
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_note.png)
    
    Note For store app customers, there is a limitation of 2-wide, XXL thumbnails in the user interface. This means that only 2x2 products with XXL thumbnails are visible on the screen at first glance with the PLP Search Layout.
- **Show Price Slider in Refine Screen** - When enabled, the price filter is a slider as opposed to a dropdown list of price ranges.

### Set the Search Layout Options

The Search Layout contains settings that control the behavior, look, and feel of the search screen. To edit the Search Layout that is associated with an app config:

1. Go to your app config and click EDIT.
2. Go to **UI** | **SEARCH LAYOUTS**.
3. Click the pencil icon to the right of **Search Layout (V1)**.

The settings available include:

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col>
              <col>
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d148979e146">Settings</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d148979e149">Description</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Settings" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e146 ">Search Settings</td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e149 ">Settings in this section enable you to customize the overall appearance of the
                  search screen</td>

              </tr>
              <tr class="">
                <td data-label="Settings" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e146 ">Variants and Wishlist Template Settings</td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e149 ">
                  <p>Customize wishlists and product variants with the settings in this section.
                  </p>
                  <div class="slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium">
                    <div class="slds-media slds-media_responsive">
                      <div class="slds-media__figure"><span class="slds-icon_container slds-icon_container_circle slds-icon-note-note"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_note.png" alt="Note"></span></div>
                      <div class="slds-media__body" style="padding-top:.5rem;padding-bottom:.5rem;"><span class="slds-text-title_caps">Note</span> Note that the "Template" setting must be set to "Variants and Wishlist Template" to
                        access these options.</div>
                    </div>
                  </div>
                </td>

              </tr>
              <tr class="">
                <td data-label="Settings" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e146 ">Cell Settings</td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e149 ">Customize the cells, which are the parent containers of each search result. For
                  instance, to remove the cell border, select "None" for "Cell Border Thickness."</td>

              </tr>
              <tr class="">
                <td data-label="Settings" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e146 ">Title Text Settings</td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e149 ">Control the appearance of the product title under the image using the settings in
                  this section</td>

              </tr>
              <tr class="">
                <td data-label="Settings" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e146 ">Promotion Text Settings</td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e149 ">Manage the look and feel of promotion text. Please keep in mind that in Field
                  Mappings, the source field mapped to "promotion_title" will be used for the promotion
                  text.</td>

              </tr>
              <tr class="">
                <td data-label="Settings" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e146 ">Price Text Settings</td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e149 ">Adjust the appearance of the price text with the settings provided in this
                  section</td>

              </tr>
              <tr class="">
                <td data-label="Settings" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e146 ">Banner Settings</td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e149 ">
                  <p>Customize the banner's appearance with the settings available here. In Field
                    Mappings, any source field mapped to a target field can be used as the Banner Product
                    Field Name. This field can be either text or an image URL.</p>
                  <div class="slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium">
                    <div class="slds-media slds-media_responsive">
                      <div class="slds-media__figure"><span class="slds-icon_container slds-icon_container_circle slds-icon-note-note"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_note.png" alt="Note"></span></div>
                      <div class="slds-media__body" style="padding-top:.5rem;padding-bottom:.5rem;"><span class="slds-text-title_caps">Note</span> To display the
                        banner, ensure that the "Enable Banner" flag is turned on in two locations: the Search
                        Layout and the App Config (App Config &gt; Modules &gt; Settings).</div>
                    </div>
                  </div>
                </td>

              </tr>
              <tr class="">
                <td data-label="Settings" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e146 ">Ratings Settings</td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d148979e149 ">Control the look and feel of product ratings with the settings in this
                  section</td>

              </tr>
            </tbody>
          </table>

### Set the Template

The right side of the screen shows a preview of the template: ![A design layout showing template options and a product display.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_cms_layouts_settings_product_search_template_preview.png)The templates available include:

- **Default template** - The price is above title. ![The default template and a banner. The price appears first, then the banner ("WIDE WIDTHS AVAILABLE"), then the title.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_cms_layouts_settings_product_search_template_default.png)
- **Default template, text fields reversed** - The title is above price. ![The default template, text fields reversed, and a promotion. The title appears first, then the price, then the promotion ("NOW XX% OFF").](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_cms_layouts_settings_product_search_template_reverse.png)
- Variants and wishlist template - This shows swatches and wishlist icon. ![The variants and wishlist template. Tapping the swatch causes the image to change so that the user can preview different colors. When the wishlist is enabled a heart icon appears in the bottom right of each search result cell.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/retail/images/rt_cms_layouts_settings_product_search_template_swatch.png)

### Test Changes

After saving changes to the app config or Search Layout, the changes are visible after relaunching the app. To test changes without affecting production, use a test app config that is linked to a test Search Layout.

1. Save app config or Search Layout.
2. Relaunch the app.
3. Do a product search.