Skip to main content

Create and publish your first store locator

Use one real store for this walkthrough. A real address makes it easier to confirm that geocoding, map placement, distance, and directions are correct.

The admin banner's Guide button opens a six-step WordPress Guide. Its progress bar tracks the five setup steps—map settings, Store Card, infobox, Search Form, and Layout—and marks work you have already completed. Publishing is deliberately excluded from the percentage because the plugin cannot reliably tell whether you have finished testing the locator on its public page. The Guide remains available before Setup, so you can reopen it at any time.

1. Configure the map provider​

Go to Store Locator → Settings → Map.

For a quick start, choose Leaflet (OpenStreetMap) with Nominatim geocoding. If you need Google Maps or Places autocomplete, follow Configure Google Maps and API keys.

Set a default latitude, longitude, and zoom near the area your business serves, then save settings.

2. Add the first store​

  1. Go to Store Locator → Stores.
  2. Select Add New.
  3. Enter the store name and set Status to Active.
  4. In Location → Address, enter the complete address.
  5. In Pin Location, geocode the address or position the pin on the correct building.
  6. Select the store timezone.
  7. Add opening hours and assign a category if required.
  8. Save the store.

Open the store again and verify the coordinates were saved. An active store without valid coordinates cannot behave correctly in map, radius, or distance features.

3. Select or create a locator layout​

Go to Store Locator → Builder and open a saved Layout. It should contain at least:

  • a Search widget using a saved Search form;
  • a Store List using a saved Store Card;
  • a Map using a saved Map infobox;
  • optionally Result count, Distance filter, Category filter, or Brand filter.

Save the layout and copy the shortcode shown for it. It looks like:

[cliq_store_locator id="123"]

Your ID will be different.

4. Publish it on a WordPress page​

  1. Go to Pages → Add New.
  2. Add the Store Locator block.
  3. Select the saved locator layout.
  4. Publish the page.

If you cannot use the block, add a Shortcode block and paste the locator shortcode. Elementor and WPBakery users can use the corresponding Store Locator element and choose the same saved layout.

5. Test as a visitor​

Open the page in a private/incognito window and confirm:

  1. the map and first result load;
  2. the marker opens the correct infobox;
  3. address search returns the test store;
  4. category filters retain the search;
  5. browser geolocation can be accepted or denied without breaking the locator;
  6. mobile cards and controls do not overflow;
  7. the store details action opens the correct destination.

If the Google map is blank, start with Configure Google Maps and API keys. For missing distance or radius behavior, use Search, radius, and distance.