A polished, Airbnb-style search bar you can drop anywhere on your site (homepage hero, landing pages, headers) so guests can start a stay search with a single, familiar control.
What it does #
Searchbar Pro gives your site a modern, multi-stage search bar that walks guests through the four questions that start every booking:
- Where they want to go (with destination autocomplete pulled from your own locations and cities, plus an optional Nearby option that jumps a guest straight to the closest destination using their own location)
- When they want to stay (a date picker)
- Who is coming (separate Adults, Children, Infants, and Pets counters)
- What they are looking for (an optional describe-or-filter step, including a natural-language box that can hand off to AI Concierge if you have it, and an optional “By name” tab for guests who already know which property they want)
On desktop it can sit as a sticky pill that stays handy as guests scroll. On phones it opens a clean full-screen modal so each step is easy to tap through. When a guest hits Search, they land on your property results page with their selections already applied. Typing a valid destination and hitting Search or Enter works the same as tapping a suggestion from the dropdown, so a guest who types the whole name and submits without clicking still gets the right results.
The bar also works on the results page itself. When your property results page shows the built-in filter bar, Searchbar Pro takes it over automatically: guests adjust their destination, dates, or party and the property grid and map update in place, without a page reload. As they scroll, the bar sticks to the top of the results so refining is always one tap away. Property pricing on that grid keeps matching whatever dates the bar has selected, exact or flexible, so cards never fall back to a generic “Starting at” price while a guest has real dates chosen.
It is built to feel like the big-brand booking sites guests already know, which lowers hesitation and gets them into results faster. You can also match it to your own brand: one accent color setting recolors the Search button, focus highlights, price histogram, and date picker in one move.
If you also run Flexible Search, the When step grows an Exact dates / I’m flexible toggle. A guest without fixed plans can switch to Flexible and pick a stay length (Weekend, 1 week, 2 weeks, 1 month) and a time frame (Anytime, or a specific month) instead of exact dates, then tap a suggested date range to lock in something concrete. The same suggested-dates strip also appears under the bar once a flexible search is active. This only appears when both modules are switched on, and it uses the stay-length and months-ahead choices you already set on the Flexible Search settings screen, so there is nothing extra to configure here.
How to turn it on #
1. Enable the module #
Go to the HomeRunner Toolkit Hub and switch on Searchbar Pro.
2. Place the search bar #
Add the shortcode wherever you want the bar to appear (for example, your homepage hero section):
[homerunner_searchbar_pro instance_id="hero" submit_url="/properties/" placeholder="Where are you going?" cta_label="Search"]
- instance_id gives this bar a unique name (useful if you place more than one).
- submit_url is the page guests are sent to when they search (your properties page).
- placeholder is the faint hint text in the Where box.
- cta_label is the text on the search button.
On your property results page you do not need a shortcode at all: if the page’s property display is set to show its filter bar, Searchbar Pro replaces it with the refine bar automatically while the module is on.
3. Tune which steps show #
You can show or hide individual steps and counters with shortcode attributes such as show_where, show_dates, show_guests, show_children, show_infants, show_pets, and sticky, and set starting counts like default_adults. Leave them off to use the standard Where / When / Who / What layout.
4. Review the site-wide settings #
Open the Searchbar Pro panel in the Toolkit Hub. This is where you set the bar’s wording, brand color, destination list, filter sections, and default results sort for the whole site. Every option is covered in the Settings section below.
5. Add flexible dates (optional) #
To offer the Exact/Flexible toggle in the When step, also switch on Flexible Search in the Toolkit Hub and choose your stay-length chips and months-ahead range on its settings screen. Searchbar Pro picks up those choices automatically, with no separate setting of its own.
Settings #
The Searchbar Pro panel is organized into five groups: Content, Style, Behavior, Locations, and Filters.
Content #
| Setting | What it controls |
|---|---|
| Default placeholder | The hint text shown in the Where field before a guest types. Default: “Where are you going?” |
| Default CTA label | The text on the submit button. Default: “Search”. |
| Describe box placeholder | The prompt text inside the What step’s describe box, shown when AI Concierge is active. Default: “Ask for specific things like a bright, modern kitchen and a yard.” |
| Suggested descriptions | Tappable example chips under the describe box, one per line, up to 8. Leave blank to use the three built-in examples (such as “Mountain retreat with a hot tub and fireplace”). |
Style #
| Setting | What it controls |
|---|---|
| Brand accent color | One color that drives the Search button, focus rings, price histogram, and date picker accent. The hover shade is derived automatically. Default: #ff385c. |
| Sticky bar backdrop | The gradient fade shown behind the results-page bar when it sticks on scroll, for contrast against the listings. Choose White gradient (the default), Dark gradient, or None. Hero search bars are unaffected. |
| Backdrop blur | Frosts the content showing through the backdrop for extra contrast. Off by default. |
| Backdrop height | How far the backdrop fade extends below the sticky bar, in pixels. Default: 60. |
Behavior #
| Setting | What it controls |
|---|---|
| Minimum query length | Characters a guest must type before destination suggestions appear. Default: 2. |
| Debounce (ms) | How long to wait after the last keystroke before looking up suggestions. Default: 250. |
| Maximum results | The most destination suggestions shown in the dropdown. Default: 8. |
Locations #
| Setting | What it controls |
|---|---|
| Show the Where field | Shows or hides the destination step across the whole site. Turn it off if every listing is in the same place, since the destination search can then only ever return that one location and just adds a step. When and Who move up to lead the bar. A single search bar can still override the site-wide setting with the shortcode attribute show_where="0". On by default. |
| Nearby option | Adds a “Nearby” row at the top of the destination dropdown. A guest who taps it is asked to share their location, then is dropped straight into the destination closest to them. This draws on the same list Destination Index builds, plus each property’s saved map location, so turn Destination Index on too and give it a moment to build before switching this on. Properties synced from your PMS already carry that map location; a manually added property without one just will not be considered for a Nearby match. If a guest declines to share their location, or nothing nearby qualifies, the row tells them so instead of going quiet. Off by default. |
| Property name finder | Adds a “By name” tab to the What step so a guest can type a property name and jump straight to that listing. Off by default. |
| Name finder threshold | Portfolios at or below this size are sent to the browser once and matched instantly as the guest types. Above it, the finder asks the server for matches instead, so even large portfolios stay fast and searchable. Default: 500. |
| Destination source | Whether the Where suggestions draw from your locations, your cities, or both. Applies to autocomplete, the suggested list, and mobile. Default: Locations and cities. |
| Destination order | Explorer admin order (the default) mirrors the curated zone list from your HomeRunner Explorer settings screen. Alphabetical builds the list from every published location and city instead, A to Z, narrowed by the two include lists below. |
| Included locations | Check specific locations to limit the Where list. Leave all unchecked to include every location (the default). |
| Included cities | Same idea, for cities. Leave all unchecked to include every city (the default). |
Filters #
| Setting | What it controls |
|---|---|
| Visible filter sections | Checkboxes for Bedrooms, Bathrooms, Property type, Price range, and Amenities. All are on by default. Unchecked sections disappear from the Filter panel and never count toward the active-filter badge. |
| Default results sort | Which sort your property results open with, site-wide, for guests browsing the storefront. Default: Explorer default (no override). Guests can still pick a different sort themselves. The option you choose must also be enabled on the HomeRunner Explorer settings screen, or the override stays inactive. |
Destination suggestions are powered by your property data. See Destination Index for how that list is built and kept fresh.
Destination cache #
Destination lists are cached by visitors’ browsers and by your site’s page cache for up to an hour, so a location or city you just added or removed does not always show up in the Where dropdown right away. Saving any change on the Searchbar Pro settings screen refreshes the cache automatically. If your locations or cities change some other way (a bulk import, for example) and you want the dropdown current immediately, click Flush destination cache at the bottom of the settings panel.
Tips #
- The What step can offer a plain-language box (“a bright modern kitchen and a yard”). If you run AI Concierge, that text is handed off so guests get smarter matches. See Guest Identity for related personalization groundwork.
- The Who step shares its Adults / Children / Pets thinking with Guest Picker, which applies the same breakdown inside the booking widget for accurate pet and child pricing.
- If every property on your site is in the same city or region, turn off Show the Where field so guests land straight on When, cutting an unnecessary step from the search.
- Turn on the Property name finder if repeat guests tend to book the same homes. Typing the first few letters of “Sunset Bluff” and tapping the match beats scrolling a results grid.
- Place one sticky bar in your header and a larger hero bar on the homepage by giving each a different instance_id.
- If the sticky results-page bar is hard to read over busy property photos, switch the Sticky bar backdrop to the dark gradient or turn on Backdrop blur for extra contrast.
- If your Default results sort does not seem to apply, check the HomeRunner Explorer settings screen first: the sort you picked has to be enabled there too.
- Want guests without fixed plans to still find something to book? Turn on Flexible Search alongside Searchbar Pro so the When step offers the Exact/Flexible toggle described above.
- If a destination update is not showing up right away, click Flush destination cache on the settings screen rather than waiting up to an hour for it to expire on its own.
- Turning on Nearby? Make sure Destination Index is on too, since Nearby has nothing to search against until that list has built at least once.