Creating a store locator with filtering using tags

Store locator filter menu
Adding tags to your data causes a filter menu to appear (red arrow).

Allow the user to narrow down their search by assigning tags to stores

Introduction to tags

One of the most frequently asked questions we get at Blipstar is "can I set up my store locator so that customers can filter based on the type of product a store sells?". The short answer is yes, and this tutorial is the slightly longer answer.

It explains how to use 'tags' in your data to enable filtering by product, service, category or any other classification you'd like to use (it's entirely up to you). Here's a simple guide to setting up filtering in Blipstar. It assumes you've created an account.

Tip: If you want to display different icons for different store types check out the map icons tutorial.

Instructions for setting up tag/category filtering

Tip: Although these instructions refer to products, any type of classification can be used. For example a chain of supermarkets might have tags for 'Cash machines', 'Gas', 'Deli' and so on.

  1. Add one (or more) columns with a title of Tags to your data (if you used the example spreadsheet this column will already exist)
  2. For each store, list the products that it sells in its Tag field(s). You can either use multiple Tags columns (and enter one tag per column) or a single column and separate each product with a comma (,) character
  3. Upload your location data
  4. The Data Import console should include a line in the output saying that the filter list has been updated
  5. Alternatively, if you're adding or editing a location online you can enter tags in the Tag field (if you can't see the Tag field click on the Show all fields button to reveal all available fields)
  6. Next, go to Deploy to get the code needed for your locator (be sure to select the Tags option)
  7. Go to your store locator - there should now be a drop-down menu containing a list of the different tags you specified in the data
  8. That's it! Your customers can now optionally search for the nearest stores containing a specific product (or category, service etc.) by selecting a tag from the menu
  9. If you prefer you can have the tags displayed as a set of checkboxes, allowing the user to select multiple tags. You can set this option in Settings > Tags

It's obvious, but we'll say it anyway: make sure the spelling of each tag/category is consistent in your data otherwise each variation will be treated as a separate tag/product/category.


Example

As a simple example, suppose you sell three types of widget. Shop A stocks them all, Shop B only stocks large widgets and Shop C stocks small and medium widgets. You'd use something like this for your data:

NameAddressTagsTagsTags
Store AMade up address 1Small WidgetsMedium WidgetsLarge Widgets
Store BMade up address 2Large Widgets
Store CMade up address 3Small WidgetsMedium Widgets

OR with a comma-separated list


NameAddressTags
Store AMade up address 1Small Widgets,Medium Widgets,Large Widgets
Store BMade up address 2Large Widgets
Store CMade up address 3Small Widgets,Medium Widgets

OR if editing your locations online you'd enter tags in the Tags field (click on the Show all fields button if you don't see it)


Manually entering tags for a store location

That's all there is to it. Users will be able to narrow down their search by choosing a tag.


Customizing tags

There are lots of settings you can change in Settings > Tags.

  • If your tags aren't very human-readable you can define labels for each tag which is what the user actually sees (e.g. if your data contains the tag RD5724 you could set the label as Sportswear)
  • If you've defined some icon groups (Settings > Icons) you can "map" each tag to an icon. So if you map the Medium Widgets tag onto an icon you've defined called "Green Arrow", all locations with a Medium Widgets tag will display the green arrow map icon (of course this works best when you have one tag per location). More info on defining Icons
  • By default each Location's tags will be displayed in the Results. To hide the tags go to Settings > Results options and change Field order for Results (and Tabs) to Define manually. Then find the Tags field and set it to blank
  • If you have a large number of tags/products (over 50) then an auto-complete textbox will appear instead of a drop-down menu (although you can turn this off)
  • You can edit the "Select a product" wording by going to Settings > Text

You can also define a second set of tags, independent from the main set. To do this you need to go to Settings > Tags and turn on the setting for the second set of tags. Then you can add them by using a column in your data called Tags2 or via the Tags2 field in the online editor. Likewise you can define a third set of tags in Settings > Tags by turning on the setting for the third set of tags. Then you add them by using a column in your data called Tags3 or via the Tags3 field in the online editor.

If you can think of any useful features that would enhance tag/category filtering in Blipstar-powered store locators we'd love to hear from you. Don't forget you can configure various aspects of tag filtering by logging in and going to Settings > Tags.

Tip: If you want to have different store locator "views" (that limit searching for a particular tag or product) you can set this up in the Deployment wizard. In the Tags step of the Deploy wizard click "Yes" to use tags, and select the tag (or tags) you want to restrict results to. Next, uncheck the option allowing the user to select the tags (so you're effectively forcing them to use the specified tags). When you publish the locator the results shown will be limited to the specified tag(s).

Alternatively if you want to define it manually you simply add "&tag=###" to the blipstar URL (where ### is the name of the tag or product, URL encoded). For example to have a store locator which only searched for stores with a tag called Toys you'd use:

https://viewer.blipstar.com/search?uid=2435124&tag=Toys

Providing store locator solutions since 2006.   Share: Linkedin  |  Twitter  |  Google+  |  Facebook  |  Pinterest