How to add a Where to Buy store locator to your food brand's website

A shopper who lands on your site and wants the product today has one question: where can I get it? A Where to Buy page answers it, and the Find Us locator is how ProvisionSync puts one on your site. It is a searchable store list with a map, and each store row names the products that store carries. Where a live retailer feed knows the shelf status, the row shows it. Where it doesn't, the row stays quiet rather than guessing.

This guide covers designing the block, choosing its options, copying the code and pasting it on Squarespace, Wix, Shopify, WordPress or Webflow. It assumes you already have stores in your account. If you don't, start with importing your store list or connecting a Kroger feed, then come back.

What the locator will and won't show

Only a store that is marked as carrying at least one of your products appears, and only while its location is Active. A store you added by hand with no products linked stays off the page. Stock chips (In stock, Low stock, Out of stock) appear only when a feed has answered for that product at that store recently. A six-week-old answer is not shown as current, because a shopper who drives across town on a stale "In stock" blames the brand, not the retailer.

The map is optional at every level. If the visitor's browser has no WebGL2, or their network blocks the map library, they get the store list and a branded panel where the map would be. Nothing breaks.

Step 1: open the Embed Designer and pick the locator

You need the Admin role, the Embed Designer pack for the page itself, and the Locations pack, which is what supplies the locator's data. Open Embed Designer and choose "Find Us locator" from the embed type strip.

Click "New design" or pick a saved one. The Styling tab has the colour and font tokens in groups: Brand colours, Surfaces & text, Chips, Fonts, and a group the locator alone has, Map extras. Map extras carries two colours. Map pin is the colour of the store pins and metro dots, and falls back to Primary if you leave it blank. Map land is the land colour of the zoomed-out map and falls back to Page background.

If you'd rather not pick colours by hand, the AI styling rail reads your declared site and suggests three looks. Type the site under "Your site", click "Suggest 3 looks", and apply the one you like. Each suggestion counts against the plan's monthly allowance.

The live preview beside the inspector renders with the same code your visitors will get, against a fictional sample catalog, so what you approve is what they see.

Step 2: choose the layout options

Nine options sit under the tokens. Every one of them is written into the pasted block as an attribute, which matters later.

Save the design and activate it. The active design is the look every locator block on your site wears.

Step 3: copy the code

Switch the Styling control to Code. The tab shows the code for the live design and a "Website platform" control. Pick your platform, and the instructions under the code box change to match. Above the box is a line naming the allow-listed sites, which are the domains an admin declared under Settings, Public site domains. If that line says no origins are allow-listed yet, fix that first: the block will only ever show its fallback line on a site the API refuses.

Copy the whole block. It contains a comment header, a style block with the design's tokens, the placeholder itself, and a short script that loads the locator library from our origin. The placeholder at its heart is one line:

<div class="sdb-findus" data-slug="">Loading store locator…</div>

You paste this once. Activating a different design later restyles the block where it already sits, on its next page load. Re-copy the code only when you change one of the nine layout options above, because those ride in the block's attributes.

Step 4: paste it on your platform

On Squarespace, edit the page, hover the section, click Add block (or the plus sign), choose Code, paste and save. Remember the plan rule: a Code Block runs JavaScript only on the Core, Plus, Advanced, Business, Commerce Basic and Commerce Advanced plans.

On Wix, use Settings, then Custom Code under Development & integrations, add a snippet to the end of the body tag, and choose which pages it runs on. Don't use the Add, Embed Code, Embed HTML element for this. That element runs in a sandboxed frame, so its requests arrive with no origin at all, and the embed only ever shows its fallback line. There is nothing you can add under Public site domains to allow it.

On Shopify, go to Online Store, Themes, Customize, click Add section, search for Custom Liquid, and paste the block into it.

On WordPress, add a Custom HTML block where the locator should appear, paste, and update the page. In the classic editor use the Text tab. WordPress strips script tags from post content for anyone without the unfiltered_html capability, and security plugins such as Wordfence remove them too. If the block saves but renders nothing, that's what happened, and whoever maintains the site should place it in the theme or a site-wide footer instead.

On Webflow, add a Code Embed element, paste into its code editor, then use Preview or publish. The Designer canvas deliberately doesn't run JavaScript, so the embed stays blank there. That isn't a fault.

One locator per product page

A locator on a product page should be about that product. The exported block ships with data-slug="", and filling it in changes what the block does, depending on the Product filter option.

With the filter off, which is the default, a filled-in slug pins the block to that product: its stores, its map dots, its buy-online row, and no picker. With the filter on, the block opens on that product with the picker pre-selected, and the visitor can still switch to the rest of the catalogue. A slug the catalogue doesn't offer opens on "All products" rather than a picker naming nothing.

Making one placement differ from another

Two blocks exported from the same design are identical. When you want the map on the Where to Buy page and a plain list in a sidebar, the exported block carries a commented-out object for exactly that:

var overrides = {
  // showMap: true,
  // showTitle: true,
  // title: "Where to Buy",
};

Uncomment a line in the copy that should differ. It applies to that block alone, and re-copying the block from the designer discards the edit along with everything else.

What to do when the map doesn't appear

The map is constructed only when the panel scrolls into view, and on a phone only when the visitor taps the Map tab, because a map load is billed at construction. So a map that is "missing" above the fold on a phone is waiting for the tap.

If the panel shows the branded stand-in instead of a map on every device, the map library or its tiles are blocked on that network, or the browser has no WebGL2. The store list still works, and the search box still filters it.

If the whole block shows its fallback line, the page's origin isn't declared under Public site domains, or on Wix it was placed with the Embed HTML element. Both are fixed in the admin or the page, not in the code.

The Where to Buy page is usually the second thing a brand puts up after the nutrition label. If you're starting from nothing, create a free account, add a handful of stores, and paste one block. You can restyle it as often as you like afterwards without touching the page again.