Start Strong
Sell Smart
Manage with Ease
Market to Success

Designing The Search Results Page

The search results page returns the products that match customers’ search queries. You can customize the search results page based on your needs.  

 

 

Making Your Design

From your SHOPLINE admin panel, go to Apps > Shopper App > App Design and click the Design button to access the design editor. From the dropdown menu at the top, select Search Result Page.

1-1 search results page.png

 

Previewing Search Results

In the left pane, the first component is Search result example, where you can test and preview search results. Simply enter a search term and see the result in the middle pane. To improve the search experience, like configuring synonyms and keyword redirection and promoting products in search results, refer to Improving Search Experience with Smart Search Recommendation.

 

Configuring the Notice Board

Currently, you can add a notice board to the search results page. The notice board appears at the top of the page. You can choose to sync it with the notice board of the homepage, or set it up separately. 

  • Synchronized from the Notice bar on the home page: You are not able to make any changes to the Notice Board.
  • Independently set: You can edit the text, color, and display style, and schedule the release time if needed. The board can have up to three announcements. An announcement can’t be deleted but you can hide or edit it whenever you need to.

1-2 search results page notice board.png

 

Configuring Sort, Filter & List View

The Sort & Filter & List View section consists of three modules: Sort, Filter, and List View. These modules let you configure the sorting method, available filter options, and list view options for the Search results page.

The order of the three modules is fixed and cannot be changed or removed. Sort and Filter are enabled by default and cannot be disabled. List View can be enabled or disabled independently and is disabled by default.

Configuring Sort

In the Sort module, you can configure the following settings:

  • Preset sort name: Enter a name for the default sorting method (for example, Recommended). This name is displayed on the sort button in the App, is required, and supports multiple languages.
  • Price sort: Disabled by default. When enabled, you must select a Default order (Price: low to high or Price: high to low). The App will display a price sort option, allowing customers to sort products by price in the selected order.
Note: The Sort module on the Search results page does not support Secondary preset sort. This option is available only on Product list pages.

Configuring Filter

In the Filter module, you can configure the filter options displayed in the App.

  1. Click + Add filter to select the filter attributes provided by the Smart Search & Recommendation app, such as Size, Color, and Price. You can add up to 10 filter options.

  2. In the Saved filters list, you can enable or disable each filter option individually.

Notes:

  • If the Smart Search Recommendation app is not installed or enabled, you must install or enable it before configuring filter options. For more information, see "Improving Search Experience with Smart Search Recommendation."
  • The display styles of filter options (such as color swatches, tags, and price sliders) always use the platform's default styles. Custom display styles configured in the Smart Search & Recommendation app are not applied.

Configuring List View

In the List View module, you can configure the available product list layouts. You can enable one or more of the following view options:

  • 1 per row
  • 2 per row (selected by default)
  • Staggered
  • 3 per row

At least one view option must remain enabled.

If only one view is enabled, the App displays that view only, and the view switcher is hidden. If two or more views are enabled, the App displays a view switcher, and you must designate one of the enabled views as the Default view.

Note: The product card content for each List View is configured separately. For more information, see "Configuring the Global Theme Settings."

 

Configuring the Floating Icon

Additionally, you can add a Floating icon to the search results page that remains visible as users scroll. This icon can be linked to either a live chat service or an event page to enhance customer support efficiency or drive campaign engagement.

There are two configuration options available: If you select Synchronized from the floating icon on the home page, the icon will inherit the homepage settings and cannot be changed. If you select Independently set, you can configure a separate floating icon specifically for the search results page, including the following settings:

  • Basic settings: Name the icon, choose its position, and upload an icon image to be displayed in your app.
  • Feature type: Select whether the icon links to an Event page or a Live chat feature:
    • If you choose Event page: Set the destination page for redirection.
    • If you choose Live chat: 
      • Select the chat service to use. Shopper App currently supports integration with Shulex, an AI-powered solution for real-time customer support. For more information, refer to this guide.
      • Decide whether to enable the Unread message notice. When enabled, a red dot will appear to notify users of any unread messages.
  • Activation time: Optionally, set a schedule for when the floating icon should be published.

1.3_EN.png

 

 

Publishing the Design

After completing the edits and confirming that everything looks right in the preview, click the Apply button in the upper right corner to publish your design to the app. If you want to hold the publishing, you can click Save to retain your edits.