Advanced search allows you to use AND logic to filter WebApp items by specific fields which match exact values.

Using use_adv_search with Events or Blog Module

The  use_adv_search parameter should work with any Module or WebApp, but because this is most commonly used on the Blog and Events Modules, we have more detailed guides on using it specifically in these contexts:

These guides and their related articles will also explain which field names need to be used for these Modules and will include more detailed examples.

Might you be looking for something slightly different?

This is an advanced tutorial. If either of the following match your Use Case better, they will be easier to implement:

If you are looking to search for WebApp items which match any of your search terms in any of their fields using OR logic, try WebApp Search on the Front End

If you're looking to search for WebApps items with Detail Pages, you may find the recently Upgraded Site Search suits your needs better. You would be able to specify which WebApps you want to include in the search too.


In this tutorial, we will go through the following steps:

  1. Identify the Custom Field IDs of the fields you want to filter by.

  2. Add the liquid parameter

  3. Test the URL parameters

  4. Build front-end controls to change the URL parameters.

  5. Add JavaScript

Step 1 - Identify the Custom Field IDs of the fields you want to filter by

In the database, fields have a Custom Field ID that is different from their user-friendly Name. In order to use the advanced search, you will need to know the ID of the field.

You can learn more about why we use Custom Field IDs and how to find the one you need for a WebApp or Module here: Custom Field IDs 

Once you've checked that Article and found the Custom Field ID you need, you can move on to Step 2.

Step 2 - Add the liquid parameter use_adv_search

{%- include 'webapp', id: '1', layout: 'portfolio_2', per_page: '9', sort_type: 'created_at', sort_order: 'asc', use_adv_search: 'true' -%}

Here, 'true' is a string, not a boolean value, so make sure it is wrapped in single quotes.

Step 3 - Test the URL parameters

Now use_adv_search has been added, Siteglide is watching the query parameters for any parameters with a key including "field_". It will use these to carry out the search when the page is loaded, so it can display the WebApp items which match.

To get the hang of how the search works, start by manually adding parameters to the URL in your browser. Later, users will use custom front-end controls.

E.g. On my page with the relative URL "/about", I want to find all WebApp items with a favourite_colour field which exactly matches "blue". The real name of the field is "webapp_field_1_3" because it was the third custom field I created for the WebApp in my Admin. My URL should be changed to:


I should see now only the WebApp items with a favourite colour of blue. Note: this is an EXACT search, so WebApps with a favourite colour of "blue and green" will not be found.

Step 4 - Build front-end controls to change the URL parameters

There are many ways a Developer could approach this and too many use-cases to list here. Here is an example to get you started:

<form id="advanced_search">
  <label for="advanced_search">Advanced WebApp Search</label>
  <select name="webapp_field_1_3" >
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  <button onclick="search()">Search</button>

You can add more than one field to the form, but remember that all fields must match exactly; Advanced Search uses AND and EXACT logic.

Step 5- Add JavaScript 

Here is an example of how you can turn user-input in the form into the URL parameters Siteglide needs. You may choose to write your own and expand upon this.

  function search() {
    // Stops the form's default behaviour
    // Assign variables
    var searchElements = document.querySelectorAll("#advanced_search select, #advanced_search input");
    var path = window.location.pathname + "?";
    //Loop through each element in the form and extract the key-value pairs.
    var i = 0;
      //On the first iteration, don't add an & symbol
      if (i>0) {
        var separator = "&";
      } else {
        var separator = "";
      path = path + separator + element.getAttribute("name") + "=" + encodeURI(element.value);
    // Reload the page with the old URL + a new parameter

Did this answer your question?