1. Home
  2. Advanced
  3. Load specific set of stores with embedded category

Load specific set of stores with embedded category

Let’s say you have product pages and want a map on each page showing stores that carry only this specific product. Earlier you’d need a separate Storemapper account for that, but now you can do that using embedded category feature.

You just need to add a specific parameter in your embed code, define a category or list of categories you want to load and you’re done.

Please, check  Using Category Filters to know how to assign your stores to categories.

Let’s look at how it works. Let’s say you have a Storemapper account with the list of stores carrying two products :  ‘Guitar’ and ‘Piano’ . You want to show them separately on two maps. Get your embed code from the dashboard, clone it and add each product into embed code under data-storemapper-categories parameter.

So for Guitar

<div id='storemapper' style='width:100%;'><p>Store Locator is loading from <a href='https://www.storemapper.co'>Storemapper store locator</a>...</p>
</div><script data-storemapper-start='2012,08,07' data-storemapper-id='1' data-storemapper-categories='Guitar'>(function() {var script = document.createElement('script');script.type = 'text/javascript';script.async = true;script.src = document.location.protocol + '//www.storemapper.co/js/widget.js'; var entry = document.getElementsByTagName('script')[0];entry.parentNode.insertBefore(script, entry);}());</script>

And for Piano

<div id='storemapper' style='width:100%;'><p>Store Locator is loading from <a href='https://www.storemapper.co'>Storemapper store locator</a>...</p></div><script data-storemapper-start='2012,08,07' data-storemapper-id='1' data-storemapper-categories='Piano'>(function() {var script = document.createElement('script');script.type = 'text/javascript';script.async = true;script.src = document.location.protocol + '//www.storemapper.co/js/widget.js'; var entry = document.getElementsByTagName('script')[0];entry.parentNode.insertBefore(script, entry);}());</script>

Add data-storemapper-categories parameter after data-storemapper-id  (before > ).

If you want to load multiple categories just list them using comma. E.g

<div id='storemapper' style='width:100%;'><p>Store Locator is loading from <a href='https://www.storemapper.co'>Storemapper store locator</a>...</p></div><script data-storemapper-start='2012,08,07' data-storemapper-id='1' data-storemapper-categories='Guitar,Piano'>(function() {var script = document.createElement('script');script.type = 'text/javascript';script.async = true;script.src = document.location.protocol + '//www.storemapper.co/js/widget.js'; var entry = document.getElementsByTagName('script')[0];entry.parentNode.insertBefore(script, entry);}());</script>

If you have any issues just shoot a message to help@storemapper.co

Updated on April 24, 2019

Was this article helpful?

Related Articles