Settings
Live Search
Disable or enable the Live Search feature. When enabled, results will be updated without reloading the page. When disabled, the page will reload.
Update URL
Updates the URL in the address bar to reflect the current search & filter state.
Fully supports the browser history API, so you can press back and forward to instantly reload the previous results fields’ state.
Show Loading Icon
Enables the loading icon spinner when fetching new results. This setting enables the Loading Icon tab with more configuration options.
Fade Results
Fades the results out when fetching new results. Fades them back in when the results have been fetched.
Results Container
A CSS selector to target the section on your site that you want to be reloaded/updated when interacting with the search form, which contains your search results.
Note: Some integration types handle this setting automatically for you, so this option may not always be available for you to customize.
Choose a unique CSS selector. For example:
#main.search-results
Make sure that the container chosen is wrapped around your search results (posts) and pagination.
Dynamic Sections
A CSS selector to target any other parts of the page to update.
For example, in addition to updating your results, you might also want to update the page title. In that case, you can add theh1 CSS selector to target it.
Note: The CSS selectors must be unique. If there are multiple instances of your selector on a page, it will fail to update.
Scroll To
Once the results have been updated, you might want to scroll the window to a particular section. Supported options include:
- Top – scrolls the window all the way to the top of the page.
- Query – scrolls the window to the results container, or the results list.
- Field – choose a connected field to scroll to.
- Custom – enter your own CSS selector to scroll to.
Pagination Type
Determines how your results will be paginated. Most queries use standard pagination, but a load more pagination style is also available when WordPress Blocks or Search & Filter shortcodes are used.
Note: Some integrations offer their own pagination options. We try to support all available options when possible, but if not, feel free to contact our customer support team for more information.
The available pagination types are:
- Normal – using this setting assumes you will be using standard pagination, either numbers or prev/next links. This is the default option in WordPress and most plugins.
- May reveal the setting Pagination Selector
- Load more – use this option if you’d like to use a Load More button instead, which will reveal more results each time it’s pressed.
- May reveal the setting Posts Container
- Make sure to add a Load More field underneath your results. You can do this by creating a Control field and setting the Control Type to Load More.
- Infinite scroll – use this option if you’d like to create an infinite scrolling effect for your search and/or filter results. More results will be revealed every time a user reaches the end of the visible list on the page by scrolling.
- It reveals the setting Scroll offset
Pagination Selector
Only available when using Normal Pagination type.
Note: This option may not be available. Some integration types handle this setting automatically for you.
Enter a CSS selector to target your pagination links, so results are also updated via Live Search when using them. The selector should target the anchor tag specifically, i.e.:
.pagination a
.pagination a.nav-links
Posts Container
Only available when using Load More Pagination type.
Note: This option may not be available. Some integration types handle this setting automatically for you.
To use the Load More functionality, it needs to know the exact container that contains only your individual posts/results, so that it may extract them and know where to place them.
Enter a CSS selector that contains only your posts, where the direct child elements are the posts/results themselves.
Scroll Offset
You can set the exact CSS margin value for when infinite scroll triggers For example, if the value is-100px, then more results will load 100px before reaching the bottom of the results.