Skip to main content
View Categories

Toolkit: Searchbar Pro

3 min read

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)
  • 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)

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.

It is built to feel like the big-brand booking sites guests already know, which lowers hesitation and gets them into results faster.

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.

3. Tune which steps show #

You can show or hide individual steps and counters with shortcode attributes such as 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.

Settings #

Open the Searchbar Pro panel in the Toolkit Hub to set site-wide defaults:

  • Default placeholder for the Where box
  • Default CTA label for the search button
  • Minimum query length before destination suggestions appear
  • Debounce (ms) to control how quickly suggestions react as a guest types
  • Maximum results shown in the destination dropdown

Destination suggestions are powered by your property data. See Destination Index for how that list is built and kept fresh.

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.
  • Place one sticky bar in your header and a larger hero bar on the homepage by giving each a different instance_id.

Leave a Reply

Your email address will not be published. Required fields are marked *