Page History

...

How does

...

Search work?

As your customer types text into the Search fieldbox, they will see results displayed in a drop-down list. This drop-down list space can be configured to suit. For instance, rather than seeing a simple drop-down list of product names, you can set this space to display richer content such as product images, titles, and codes. You can also restrict the number of products listed here, and if the customer does not see what they need, they can press 'Enter' or select the relevant button to reach the Search Results page, for more comprehensive results.

...

1. In CMS, navigate to Content → Pages & Templates
   Image RemovedImage Added
   
   
2. Click on Theme Layout.
   
   
3. Click Edit.
   
   
4. Locate the 'Product Search Widget' in your Theme Layout template. In our example, it is in Zone: HeaderColumn2.
   Image RemovedImage Added
   
   
5. In the widget, customise Search by selecting or entering the values required in each field. See Product Search widget help for details.  

Add the 'Search with Preview' widget

1. Add the Search with Preview widget to In the same zone as the Product Search widget, add the Search with Preview widget by clicking on Add Widget. Image Removed 
   
   
2. From the popup window, search for the Product Search with Preview Widget. Make sure it is highlighted, then click Image RemovedAdd Widget.
   
   
3. Image Removed
   In the widget, you can change the Search Placeholder text to display 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 change the number of products the search facility will display as your customer is typing in their text by changing the Number of products to display. The default (and maximum) is 9.
   Image Removed
   Image Added
   
   
4. Click Save to add the new Product Search with Preview widget to your theme layout.
   
   
5. Effect Click Publish to effect the change to your CSS by clicking Image Removedat the top-right of the pagewebsite.
   
   
6. Navigate to Content → Pages & Templates → Products.
   
   
7. Verify that you have Product Search with Preview List Item Template and Product Search with Preview Template in the list.
   
   
8. Click on Product Search with Preview Template. You should see four widgets in the layout:
   Product Search with Preview Product Category List
   Product Search with Preview List Title
   Product Search with Preview List Grid
   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 RemovedImage RemovedImage RemovedImage Added Image Added Image Added
9. 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 RemovedEffect Image Added
10. Click Publish to effect the change to your CSS by clicking Image Removed at the top-right of the pagewebsite.
    
    
11. Navigate back to the Content → Pages & Templates → Products page Products page.
    
    
12. Let's review the Product Search with Preview List Item Template content and customise if required.
    Image Removed
    Image Added
    
    
    
13. 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.
    
    
14. Effect the change to your CSS by clicking Image Removedat the top-right of the pageClick Publish to effect the change to your website.
    
    
15. Go to your website and verify that the Product Search with Preview and Filtering functionality works as expected:
    
    
    1. You should see your Product Search with Preview button underneath your Product Search prompt.
       
       
    2. You don't have to have both search facilities implemented; choose which one you and your customers prefer.
       Image RemovedImage Added
       
       
    3. 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 RemovedImage Added
       
       
    4. Type the same term, glove, into the new Product Search with Preview field, and note the difference in the returned search results.
       Image RemovedImage Added
    5. Press ENTER or click your prompt prompt Image Modified in in our example, and the system will take you to the Search Results page.
       
       Image RemovedImage Added
       
    6. 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 RemovedImage Added
       
       
    7. The previous views were in Grid mode. Click List to view in List mode.
       
       Image RemovedImage Added
       
       
    8. You can also sort your search results by Relevance or (reverse-) alphabetically by brand, description, or product-code. 
       
       
16. 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.
    
    
    1. Type a search term into the Product Search With Preview search box.
       Image RemovedImage Added
       
       
    2. Click the "View All" prompt and press Enter to view all the search results.
       Image RemovedImage Added
       
    3. When the results come up, click List to display the results in List view
       Image RemovedImage Added
       
       
    4. 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 RemovedImage Added
       
       
17. 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.

...