My store locator isn't loading on Squarespace

Some Squarespace themes have a built-in feature called Ajax Loading. This feature can speed up the loading of pages on your site, but interferes with the loading of many embedded apps like Stockist Store Locator.

If your theme has this setting enabled, you may notice that your store locator only loads when visiting the URL of your store locator page directly. If you click a link from another page on your site, the locator may not appear properly (typically the loading message will never disappear).

If this happens, it's possible to fix it with one of the following options.

Option 1: Turn off Ajax Loading entirely

The simplest option is to turn off the Ajax loading feature from your Squarespace site:

  1. Open your Squarespace site admin
  2. In the Home Menu, click Design, then click Site Styles
  3. Scroll down to Site: Loading
  4. Uncheck Enable Ajax Loading

However, this will disable the Ajax Loading feature for all pages of your site, even those that can work with it.

Option 2: Turn off Ajax Loading for your Store Locator page

A more targeted fix is to turn off the Ajax Loading option just for your store locator page. This allows the rest of your site to continue to use the faster loading method, while the store locator page will load normally (which should still be relatively fast).

Squarespace doesn't have a built-in option to disable Ajax Loading for specific pages, but this can be accomplished by adding a small bit of script to your page.

  1. Open your Squarespace site admin
  2. Navigate to Settings > Advanced > Code Injection
  3. Add the following code to the Footer code box, including the <script> and </script> on the first and last lines:

    <script>
// Ensure a full page reload when visiting the Store Locator page
(function(){
  // CHANGE THE LINE BELOW TO THE URL OF YOUR STORE LOCATOR PAGE
  // e.g. for example.com/store-locator you would use the URL set below
  var locator_page_url = 'store-locator';
 
  // Disable AJAX loading on links pointing to the locator page, by adding a 'data-no-ajax' attribute
  function fixLinks() {
    var links = [].slice.call(document.querySelectorAll('a[href*='+locator_page_url+']'));
    links.forEach(function(link){ link.setAttribute('data-no-ajax','') });
  }

  // Fix all links on initial page load
  fixLinks();
  window.addEventListener("mercury:load", function(){
    // Fix all links on subsequent AJAX page loads
    fixLinks();
    // If the locator page has been AJAX-loaded (e.g. we missed fixing a link), refresh
    if (window.location.href.indexOf(locator_page_url) > -1) {
      window.location.reload();
    }
  });
})();
</script>
  4. In the code that you pasted, change the 6th line of code to match the URL of your store locator page. For example, if you added your locator to your-site.com/find-us, change the code to var locator_page_url = 'find-us';

If you run into any trouble, please let us know and we're happy to assist.

Related Articles