What's the Product Search page and how to use it

Compatibility:

WebSite X5 Pro since version 2020.1

The final goal of an online shop is of course selling products.  In order to achieve it, there are some conditions you should take into account:  customers need to find your store, they should need or think they need one of your products, feel that your store is reliable, that your offer is convenient, etc.

Because there are many aspects to consider, you need to make sure that the customer experience on your website is satisfying in any of its aspects and that the entire process goes on smoothly.

One of the aspects you can work on in this sense is the products search: if you have a high number of references on your store, finding the right product can be difficult for your customers. That's why providing a quick and efficient search engine can be crucial to make them happy.

Let's see how you can set up a search for your store products: it's easier than you think!

How to set up the Product Search page

When you create an online store (see: How to create a e-commerce), WebSite X5 automatically generates a product search page providing a search field and some filters to display the searched product boxes in a neat way, according to the set filters.

You can decide to make the Product Search page available to your customers and, of course, to customize its functions and graphics according to your specific needs:

• Go to Step 3 - Map, in the Special Pages category you will find three pages created automatically by the program: E-commerce: Shopping cart,  E-commerce: Search and E-Commerce: Product Page.
• Select E-commerce: Search and click on the Edit button (or double click on the page itself).
• In the following window, stay in the Search section and activate all the filters you want to make available in a side Search bar to your customers. You can choose among:
  • Search field: it allows you to search for a product by name, SKUY code and description. By using the quotation marks, the search is performed by exact phrase: for example, if you type "blue t-shirt", only the products reporting both terms and in this exact order in the name or description will be displayed.
  • Categories: search for one or more categories.
  • Properties: search by the properties set for the products (see: How to create custom filters for the Product Search page).
  • Price: search by price, according to an established range of prices from the less to the most expensive ones.
  • New Product: search only for products that have been marked "New".
  • Discounted product: search for products for which both a specific and quantity discount has been applied.
  • Availability: search only the products actually available.
  • Sorting:sort the search results by one of the following criteria:
    • Relevance;
    • Lowest Price;
    • Highest Price.
• Once the tools and filters are set, you can customize the appearance of this search bar through the options in the Style section. Select the element you want to edit (Background, Title, Contents) and use the settings that are offered to you accordingly. 
• Once the sidebar is configured, you can focus on how the identified products will be displayed: open the Settings section and use the options available to set the searched product box style.

#tip - For more information about creating and customizing cards, see: What are product cards and how to customize them

How to link the Product Search page

Now that you have defined which search filters you want to provide, as well as how they should be displayed, you need to decide how to link the Product Search page within your project so that it can be found and used by your customers.

There are different ways to proceed depending on the result you want to achieve.

Solution 1:

• Go to Step 3 - Map, select E-commerce: Search in the Special Pages folder  and drag it inside the Menu folder.
• An Alias of the page is created: rename it and, if necessary, move it so that it appears correctly in the navigation menu. The Alias automatically maintains the link to the Product Search page.

Solution 2:

• Select the element you want to work on: it could be a text, an image or even a level of the navigation menu.
• Click on the  button to insert a link.
•  In the Link window, select the Product Search action: you can decide to display all available product categories or only a particular one. You can also decide if you only want to display the products marked as "new" and / or as discounted.