Docs / Guides / How to Add a Search Bar for Your Locator on Any Page

How to Add a Search Bar for Your Locator on Any Page

Let customers search for nearby locations from your homepage, footer, or any page. A simple form redirects to your store locator with results ready.

Let customers search for locations from anywhere on your site. Add a search bar to your homepage, footer, or splash page that redirects to your locator with results ready.

Instead of a "Find a Store" button, give visitors an input field: "Enter your zip code" and go. They land on your locator page with their search already complete.

Before You Start

You'll need a Storepoint account and an embedded store locator on your website. If you're new, follow the Quick Start Guide to get set up.

Start Your Free Trial See Examples


Copy this form and paste it wherever you want the search bar to appear. Replace YOUR_LOCATOR_PAGE_URL with the URL of your locator page.

<form action="YOUR_LOCATOR_PAGE_URL" method="get">
    <input type="text" name="locate" placeholder="Enter zip code or city..." />
    <input type="submit" value="Search" />
</form>

For example, if your locator is at https://example.com/locations, use that as the action URL.

That's it. When someone submits the form, they're redirected to your locator page with their search results already displayed.

Styling

The form is unstyled by default, so it naturally inherits your website's styles. Customize it with your own CSS to match your design.


Add a Tag Filter (Optional)

Want customers to filter by category before they search? Add a dropdown for your tags.

<form action="YOUR_LOCATOR_PAGE_URL" method="get">
    <input type="text" name="locate" placeholder="Enter zip code or city..." />
    <select name="tags">
        <option value="">All Locations</option>
        <option value="authorized-dealer">Authorized Dealer</option>
        <option value="service-center">Service Center</option>
    </select>
    <input type="submit" value="Search" />
</form>

Replace the option values with your actual tags. Visitors can now search by location and filter by type in one step.


How It Works

When someone submits the form, they're redirected to your locator page with the search query in the URL. The locator reads the query and automatically searches for nearby locations.

Geocoding

Searches use geocoding to convert searched queries like zip codes into map coordinates. These requests count toward your map provider geocoding quota, similar to search suggestion requests made directly in the locator.


Common Questions

Can I customize the placeholder text?

Yes. Change the placeholder attribute to anything you like: "Find near you...", "Enter your address...", "Check your area...", whatever fits your use case.

What if I want multiple tag dropdowns?

Use multiple select elements with the name tags[] (with brackets). Each selected value will be passed to the locator.

Does this work with any website platform?

Yes. It's plain HTML. Works on Shopify, WordPress, Squarespace, Webflow, custom sites, anywhere you can add HTML.

Can I style the form?

Absolutely. Add classes to the form elements and style them with CSS to match your site's design.


Learn More

Still have questions?

We're happy to help anytime.

Get in Touch

Ready to get started?

Create your store locator in minutes.