Skip to main content

How to create a pre-filtered store locator

Show only specific locations on different pages of your website using URL parameters or data attributes.

Updated over 2 weeks ago

Want different pages on your website to show different subsets of your locations? You can pre-select filters so the store locator only shows matching locations when it loads.

Using URL parameters

Add ?filters=FILTER-ID to the page URL where your store locator is embedded.

Find the filter ID on your Filters page (shown next to each filter name).

Single filter:

https://yoursite.com/store-locator?filters=abc123

Multiple filters:

https://yoursite.com/store-locator?filters=abc123,def456

Using data attributes

You can also pre-select filters directly in the embed code by adding data-storerocket-filters:

<div id="storerocket-widget"
     data-storerocket-id="YOUR_PROJECT_ID"
     data-storerocket-filters="abc123,def456">
</div>

This is useful when you want different embed codes on different pages, each showing a different set of locations.

Example use cases

  • Product pages: Show only stores that carry a specific product

  • Regional pages: Show only stores in a specific region

  • Partner pages: Show only authorized dealers or premium locations

How it works

When filters are pre-selected, the store locator loads with those filters already active. Visitors will only see locations that have those filters assigned. They can still clear the filters to see all locations.

Creating separate store locators

If you need completely separate store locators (different locations, different settings), create separate projects instead. See How to create multiple store locators.

For a full guide on filters, see How to use search filters.

Did this answer your question?