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 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.
  • Now move on to the graphic settings: open the Settings section and use the options available to set the searched product box style.
  • Start by choosing how they should be displayed. For example, by selecting Cover on the left, title and contents on the right, in every box the product cover image will be displayed on the left and all information related to it on the right.
  • Use the options available to set how many boxes should be displayed per row, how many rows per page, the height of the rows, the size of the cover image and the inner margins.
  • Define which elements of the boxes are to be displayed and their graphic properties (fonts, colors, borders and margins). The elements that can be displayed on cards are:
    • card background
    • cover
    • product name
    • description
    • details (such as category, quantity, availability, price, etc.)
    • "Add to cart" button
    • "Add to Wishlist" button


#tip - Many of these elements take on the information defined when setting up the product (see: How to create a product catalog).


  • Finally, decide whether to complete the product sheets with ribbons that highlight new or discounted products.


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.