Compatibility:

WebSite X5 Evo and Pro

A search field can be very useful on websites reporting lots of contents as well as on online shops offering many products, because it is a way of easily finding the piece of information or the product you are looking for. 


If you want to make this function available on your website, you simply need to add the Search Object in the Template Header or Footer, or even insert it as a Page Content. This Object uses an internal search Engine which focuses the search on the whole website or on some sections only and which reports the results sorted by relevance.


In order to correctly set up the Search Object, you need to follow these 3 steps:

  1. Decide where you want the Search field to be displayed.
  2. Decide which contents the search should be performed on
  3. Define the graphic style for the Search field.


How to add A Search field

In most cases, the best solution is to add the Search filed directly on the Template Header instead as on a specific page: in this way, it will be available on the whole website. 


If you decide to follow this advice, you then need to:

  • Go to Step 2 - Template Settings and click on Template Content.
  • Use the editor you find in the Header to add the Search Object in this section of the website. 
  • Double-click the Search Object you just added to open its settings window and report the necessary parameters.


#tip - When you add the Search Object in the Template Header/Footer or on a Page, a Special Page named "Search" is automatically generated on the Sitemap: you can select it an open the "Page Properties" section to define its settings.


How to define the search area

Now you need to decide the content you want to perform the search on. You can use the appropriate option in the Search Object to:

  • Search on the whole Site: the search is performed on Pages, Images, Videos, E-Commerce Products and Blog. In this case, the search results will be organized by their relevance and displayed on Pages which are automatically generated by the program. For more information see:  How the Search Results pages are displayed within WebSite X5.
  • Search on E-commerce Products:  This option is available only if you are working with the Pro edition of WebSite X5. In this case, the search is performed on the E-Commerce Products only and the results are reported on the Product Search Page. Additional filters are available on this page, so to make the search more precise.  For more information see:  What's the Product Search page and how to use it.
  • Search on Blog Articles: the search is performed on the Blog Articles only. The results are organized by their relevance and displayed on the Blog Home Page. 


How to define the graphic style of the Search field

Now you can move on and set up the graphic style of the Search filed:

  • Stay in the settings window of the Search Object.
  • Choose  the display mode that you want to use:
    • Search field and Button: this adds both the search field, where the search string is typed in, and the Search button, to click on to start the search. These two elements are inserted side by side.
    • Only search field: only the search field is added with this option. When the search string has been typed in, you must press the Enter key to start the search.
    • Only button and search field visible on click:only the Search button is added with this option. When you click on this button, the search field appears: type in the search string and click on the Search button again to start the search.
  • According to the display mode you choose, the available options may vary. You can customize all the elements:
    • the position of the Button with reference to the Field;
    • the labels displayed inside the Field and the Button;
    • fonts, colors, borders, rounded corners, margins and distances.
  • Finally, you can possibly add an icon, possibly a tiny magnifying glass to help the visitor understand the function of the Search Filed:
    • Activate the Show Icon option.
    • Select the Icon you want by using the library or a locally stored file. 
    • Define the icon Position (inside the search field or on the button)  and the Alignment (to the Left or Right of the search field or button it is displayed in).
    • Click Ok when you're happy with the result.


#tip - For more information about the WebSite X5 internal Search Engine, please see: How WebSite X5's built-in Search Engine works.