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.

Image Added

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

Add

In the same zone as the Product Search widget, add the Search with Preview widget by clicking Add Widget. 
From

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.

Image Added

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 the widget Search Placeholder, you can change the Search Placeholder text to display displayed as a meaningful prompt , so your customers know what to expect when they start typing in text. In this example, our prompt is “Product Search with Preview”.
   You can also in the Search box if required. Default: Product Search
   
   
5. In Number of products to display, change the number of matching products the search facility will display as your customer is typing in their text by changing the Number of products to display. The default results displays in the dropdown space as the user types. Default (and maximum) is : 9.
   Image Removed
   Click Save to add the new
   
   
6. To set more options, see: Product Search with Preview widget to your theme layout.
   Click Publish to effect the change to your website.
   Navigate Widget. 
   
   
7. To save, click Save.
   
   
8. If your site uses Page Preview, click Publish.
   
   
9. Go to Content → Pages & Templates → Products.
   
   
10. Verify that you have In the widget list, check you have Product Search with Preview List Item Template and Product Search with Preview Template in the list.
    Image Added
    
    
11. Click Product Search with Preview Template. You should see four widgets in the layout: 
    
    
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.
    You can customise the search return message in the first three widgets by clicking their title or their respective Edit button.
    Image Removed Image Removed Image Removed
13. You can customise the message that the system displays when it lists product results as the customer is typing text into the search field; the default is View All. In our example, we will use See More?
    Image Removed
14. Click Publish to effect the change to your website.
    Navigate - adds the 'View All' button that provides access to the all results found page. 
    
    
15. Go back to Content → Pages & Templates → Products page.
    
    
16. Let's review the To tailor messages and button text, click Product Search with Preview List Item Template content and customise if required.
    Image Removed
    No option in the Product Search with Preview List Item Template widget layout list requires changing to facilitate the new product search with preview functionality.
    However, you may want to tailor messages or button prompts to match your brand’s voice and tone.
    Click Publish to effect the change to your website.
    Go to your website and verify that the Product Search with Preview and Filtering functionality works as expected:
    You should see your Product Search with Preview button underneath your Product Search prompt.
    You don't have to have both search facilities implemented; choose which one you and your customers prefer.
    Image Removed
    In the Product List search (we have ours configured to only show the product name), type in a search text, such as “glove”, and note the results' list.
    Image Removed
    
17. Type the same term, glove, into the new Product Search with Preview field, and note the difference in the returned search results.
    Image Removed
Press ENTER or click your prompt Image Removed in our example, and the system will take you to the Search Results page.
Image Removed
Click the Filter By button and review the Brands by which you can filter your search results. Do the same with categories if you classify your products by category.
Image Removed
The previous views were in Grid mode. Click List to view in List mode.
Image Removed
You can also sort your search results by Relevance or (reverse-) alphabetically by brand, description, or product-code. 
If you Search Results in List mode, note that the next Product Search With Preview search will display the results in the drop down in LIST format rather than GRID.
Type a search term into the Product Search With Preview search box.
Image Removed

18. Click the "View All" prompt and press Enter to view all the search results.
    Image Removed
    
When the results come up, click List to display the results in List view
Image Removed
Now return to the Product Search With Preview search box and type in a new search term. The resultant drop down list is in List view.
Image Removed
Experiment with the customisation parameters under each of the Product Search with Preview widgets covered in this knowledge base to see what works best for your site. 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 

Image Added



19. After changes are completed, if Page Preview is on, click Publish to see the changes on your website.
    
    
    

Related

Resources