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.
You can pre-filter by filter slug or filter ID. Both work exactly the same way, so use whichever you find easier to read.
Finding your filter slug or ID
Go to your Filters page.
The slug is the small grey badge shown directly under each filter's name. A filter called "Whole Foods Market" will usually have the slug
whole-foods-market.The ID is the number in the address bar when you click a filter to edit it. For example
storerocket.io/app/filters/148952/editmeans the ID is148952.
Two things worth knowing about slugs:
Copy the slug, don't guess it. If two filters end up with the same name, StoreRocket adds a number to keep them unique, so you can get
sprouts-2ormissouri-9. Guessingsproutswhen the real slug issprouts-2will show an empty map.Renaming a filter does not change its slug. Once a filter is created its slug is locked in, so your pre-filtered pages keep working even if you rename the filter later.
The filter's display name never works. ?filters=Whole Foods Market will not match anything. It has to be the slug or the ID.
Using URL parameters
Add ?filters= to the page URL where your store locator is embedded.
Single filter:
https://yoursite.com/store-locator?filters=whole-foods-market https://yoursite.com/store-locator?filters=148952
Multiple filters:
https://yoursite.com/store-locator?filters=whole-foods-market,fresh-thyme https://yoursite.com/store-locator?filters=148952,148955
This is handy when you want one page to serve several different pre-filters, for example from links in a nav menu or from your product pages.
Starting the map on a specific place
?search= does the same job for location instead of filters. The widget geocodes whatever you pass, drops it into the search box, and centres the map there on load:
https://yoursite.com/store-locator?search=Los Angeles, CA https://yoursite.com/store-locator?search=SW1A 1AA
Any city, postcode or address works, and it combines with the filter parameters:
https://yoursite.com/store-locator?search=Los Angeles, CA&filters=whole-foods-market
If you want every visitor to start in the same place rather than a specific link, set the initial map position under Widget > Settings instead. One thing to watch: if your widget is set to use the visitor's own location on load, that wins over a fixed starting point for most people, so turn it off in the same screen if you want the fixed position to apply.
Using data attributes
You can also bake the pre-filter straight into the embed code by adding data-storerocket-filters to the same div that already has your data-storerocket-id:
<div id="storerocket-widget"
data-storerocket-id="YOUR_ACCOUNT_ID"
data-storerocket-filters="whole-foods-market">
</div>Multiple filters:
<div id="storerocket-widget"
data-storerocket-id="YOUR_ACCOUNT_ID"
data-storerocket-filters="whole-foods-market,fresh-thyme">
</div>IDs work here too, and you can mix both formats in the same list if you want:
<div id="storerocket-widget"
data-storerocket-id="YOUR_ACCOUNT_ID"
data-storerocket-filters="whole-foods-market,148955">
</div>Use this when you want different embed codes on different pages, each showing a different set of locations.
Important: multiple filters narrow your results
By default StoreRocket uses AND logic, which means a location has to have every filter you list to show up. Listing whole-foods-market,fresh-thyme shows only the locations tagged with both, which is often zero.
You can change this in two places.
Per embed (recommended when only one page needs it) — add data-storerocket-filter-operator:
<div id="storerocket-widget"
data-storerocket-id="YOUR_ACCOUNT_ID"
data-storerocket-filters="whole-foods-market,fresh-thyme"
data-storerocket-filter-operator="or">
</div>Use or to show locations tagged with any of the filters you list, or and to show only the ones tagged with all of them. Leave the attribute off entirely and the widget follows your account setting exactly as before. any and all work as alternative spellings.
This also works as a URL parameter, so one page can serve both: ?filters=whole-foods-market,fresh-thyme&filter_operator=or
For the whole account — go to Widget > Settings and change the filters behaviour dropdown to "Show locations that have ANY of the selected filters". This affects every embed that doesn't set the attribute itself.
When in doubt, start with a single filter and confirm the results before adding a second one.
Pre-filtering with hidden filters
Hidden filters work as pre-filters too, using either the slug or the ID. This is the cleanest way to build a pre-filtered page when you don't want visitors clicking those filters on and off.
Edit any filter on your Filters page and toggle Visible off. It disappears from the widget's filter list but still works in ?filters= and data-storerocket-filters.
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
Brand pages: Show only locations that stock a specific brand
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, unless the filter is hidden.
Troubleshooting
The map is empty after adding a pre-filter. Check these in order:
Is the slug exactly right, copied from the badge on the Filters page? It's case sensitive and lowercase.
Are you listing more than one filter with AND logic on? Try one filter on its own.
Does the filter actually have locations assigned to it? Check the location count on the Filters page.
Is your widget's initial display set to use the visitor's location? If so the map is empty until they allow location access or type an address, whether you pre-filter or not. You can change this under Widget > Settings.
Only one brand or category is showing and I didn't ask for that. Someone may have left a data-storerocket-filters value in your embed code from an older campaign. View the page source and search for data-storerocket-filters on the widget div.
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.