Page History

Excerpt
hidden true
Overview of adding product discovery and search tools

Multiexcerpt
hidden true MultiExcerptName Feature Title
Product Search and Filtering Improvements

Multiexcerpt
MultiExcerptName Feature Overview
The Search tool and results returned can be configured to suit your site's needs. Select:  what and how results are displayed what is suggested in the dropdown list space during a search how results are sorted whether to include content (static) pages in search results. See Search with Content page results.

How does Search work?

As your customer types text into the Search box, matching suggestions display in a dropdown list. This dropdown space can be configured to suit. For instance, rather than seeing a simple list of product names, it can display richer content such as product images, titles, and codes. You can also restrict the number of products that appear and depending on version, allow customers to add a product to cart from here. If the customer does not see what they are looking for, they can press 'Enter' or click 'View All', to reach the Search Results page for all matches.

Step-by-step guide

Add Product Search Widget

This widget will render a Search tool with suggestions displaying as the user types. NOTE - Suggestions can be turned off.

1. In CMS, navigate to Content → Pages & Templates
   
   
   
2. Find and click Theme Layout.
   
   
3. Click Edit.
   
   
4. In the Theme Layout template, locate the 'Product Search Widget' and click Edit. In our example, it is in Zone: HeaderColumn2.
   
   
   
5. In the widget, select or enter the values required. See: Product Search Widget.  

Add Search with Preview Widget (optional)

This is an alternative to the Product Search Widget. It will render a Search box with richer data and images in the dropdown space.

1. Go to the Theme Layout template and click Edit.
   
   
2. In the zone you want to add the Search box, click Add Widget. (TIP - If the Search Product Widget is there, you can just disable it.) 
   
   
3. In the popup window, search for the Product Search with Preview Widget. Make sure it is highlighted, then click Add Widget.
   
   
4. In Search Placeholder, change the text displayed as a prompt in the Search box if required. Default: Product Search
   
   
5. In Number of products to display, change the number of matching products the results displays in the dropdown space as the user types. Default (and maximum): 9
   
   
6. To set more options, see: Product Search with Preview Widget. 
   
   
7. To save, click Save.
   
   
8. If your site uses Page Preview, click Publish.
   
   
9. Go to Content → Pages & Templates → Products.
   
   
10. In the widget list, check you have Product Search with Preview List Item Template and Product Search with Preview Template.
    
    
    
11. Click Product Search with Preview Template. 
    
    
12. Four widgets control the layout of Preview results returned. To customise the search return, click Edit next to each widget.
    Product Search with Preview Product Category List - controls display of the category list structure for products matching the search keyword(s)
    Product Search with Preview List Title - renders the heading for search suggestions in the dropdown space
    Product Search with Preview List Grid - renders the grid used to display each product found and the no results message
    Product Search with Preview Show All Button - adds the 'View All' button that provides access to the all results found page. 
    
    
13. Go back to Content → Pages & Templates → Products page.
    
    
14. To tailor messages and button text, click Product Search with Preview List Item Template. Edit any of these widgets.
    Product List Product Code - adds the Product Code into the Preview results
    Product List Image - controls which image is displayed in the Preview results
    Product List Product Title - renders the product title for products in the Product List template
    Product List Price - renders the price and controls how it is displayed in the Preview results 
    
    
    
    
    
15. After changes are completed, if Page Preview is on, click Publish to see the changes on your website.
    
    
    

Related Resources