Squarespace Tutorial

How to Add a Store Locator to Squarespace (2026)

Add a store locator to Squarespace using Code Blocks. Step-by-step tutorial with embed code, Ajax loading fixes, and template-matching design tips.

If your business has multiple locations, retail stores, restaurants, service centers, or dealers, you need a way for visitors to find you.

This guide covers everything you need to add a store locator to Squarespace: from simple setups to advanced configurations.

Related: What is a store locator? | Store locator examples

#Why Squarespace Sites Need Store Locators

#The Business Case

The numbers make it clear:

  • 46% of Google searches have local intent (Google)
  • 76% of "near me" searchers visit within 24 hours (Google)
  • 78% of local mobile searches result in offline purchases
  • "Near me" searches continue to grow year over year

Your beautiful Squarespace site attracts visitors. A store locator converts them to customers.


#Your Options for Squarespace

#Option 1: Static Contact Page

What it is: A page listing addresses manually.

Pros:

  • No extra tools needed
  • Simple to create

#Option 2: Embedded Google Maps

What it is: A Google Maps embed showing your locations.

Pros:

  • Free
  • Shows a map

#Option 3: Dedicated Store Locator (Recommended)

What it is: A professional store locator platform embedded on your site.

Pros:

  • Full search functionality
  • Professional analytics
  • Lead capture
  • Google Sheets sync
  • Custom branding
  • Mobile responsive

Cons:

  • Monthly cost

Best option: StoreRocket


#Adding StoreRocket to Squarespace

StoreRocket is the most capable store locator solution for Squarespace. Here's the complete setup:

#Step 1: Create Your StoreRocket Account

  1. Go to storerocket.io/get-started
  2. Enter your email and create a password
  3. Access your dashboard immediately
  4. No credit card required for the 7-day trial

#Step 2: Add Your Locations

Option A: Manual Entry

Best for fewer than 20 locations:

  1. Click Locations > Add Location
  2. Enter location name
  3. Enter full address (auto-geocodes as you type)
  4. Add contact details:
    • Phone number
    • Email address
    • Website (if location-specific)
  5. Set business hours
  6. Click Save

Repeat for each location.

Option B: CSV Import

Best for 20+ locations:

  1. Prepare a spreadsheet with columns:
    • Name
    • Address
    • City
    • State
    • Zip
    • Phone
    • Hours
  2. Go to Locations > Import
  3. Upload your CSV file
  4. Map columns to StoreRocket fields
  5. Click Import

Option C: Google Sheets Sync

Best for ongoing management:

  1. Create a Google Sheet with location data
  2. Go to Settings > Integrations > Google Sheets
  3. Connect your Google account
  4. Select your spreadsheet
  5. Map columns to fields
  6. Enable automatic sync

Now your Squarespace store locator updates automatically when you edit the spreadsheet!

#Step 3: Customize Your Widget

  1. Go to Widget > Themes
  2. Choose a theme:
    • Aurora: Clean, modern design
    • Nebula: Compact, sidebar-friendly
    • Custom: Build your own (see store locator examples for inspiration)
  3. Configure settings:
    • Map provider: Google Maps or Mapbox
    • Default search radius
    • Distance units (miles/km)
    • Language
  4. Set your brand colors
  5. Preview and adjust

#Step 4: Create Filters (Optional)

Help customers find the right location:

  1. Go to Filters
  2. Click Add Filter Group
  3. Create groups like:
    • "Store Type" → Flagship, Outlet, Partner
    • "Services" → Repairs, Consultations, Pickup
    • "Products" → Full Line, Accessories
  4. Assign filters to relevant locations

#Step 5: Enable Lead Capture (Optional)

Capture visitor information:

  1. Go to Widget > Lead Capture
  2. Toggle on lead capture
  3. Configure form fields
  4. Set up email notifications

#Step 6: Get Your Embed Code

  1. Go to Widget > Install
  2. Copy the embed code:
 1<div class="storerocket-store-locator"></div>
 2
 3<script src="//cdn.storerocket.io/widget.js"></script>
 4<script>
 5StoreRocket.init({
 6    selector: ".storerocket-store-locator",
 7    account: "YOUR_ACCOUNT_ID"
 8});
 9</script>

Replace YOUR_ACCOUNT_ID with the account ID shown under Widget → Install in the StoreRocket dashboard.

#Step 7: Add to Squarespace

Method 1: Code Block (Most Common)

  1. Log into your Squarespace dashboard
  2. Navigate to the page where you want the store locator
  3. Click Edit on the page
  4. Click the + button to add a new block
  5. Select Code from the options
  6. Paste your StoreRocket embed code
  7. Click Apply
  8. Click Save on the page

Method 2: Markdown Block

  1. Add a Markdown block
  2. Paste the embed code
  3. Save

Method 3: Header/Footer Injection (Advanced)

For site-wide availability:

  1. Go to Settings > Advanced > Code Injection
  2. Paste the script in the Footer section
  3. Add the container div to individual pages via Code blocks

#Step 8: Adjust Block Settings

After adding the Code block:

  1. Click on the block settings
  2. Set the block to full width if desired
  3. Adjust spacing/padding as needed
  4. Preview on desktop and mobile

#Step 9: Test Everything

Before publishing:

  • ✅ Search by zip code works
  • ✅ Search by city works
  • ✅ GPS location works
  • ✅ Results display correctly
  • ✅ Directions links open maps app
  • ✅ Phone numbers are clickable
  • ✅ Mobile experience is good
  • ✅ Filters work (if configured)

#Squarespace-Specific Considerations

#Ajax-Loading Pages Issue

Some Squarespace templates use Ajax loading, which can prevent embeds from loading when navigating between pages.

Symptoms:

  • Store locator appears when directly visiting the page
  • Store locator doesn't appear when clicking from navigation

Solutions:

Solution 1: Disable Ajax Loading

  1. Go to Design > Site Styles
  2. Find Ajax Loading setting
  3. Disable it

Note: This may slightly impact page transitions.

Solution 2: Force Full Page Loads

Add this to your header code injection:

 1<script>
 2  if (window.history.replaceState) {
 3    window.history.replaceState(null, null, window.location.href);
 4  }
 5</script>

Solution 3: Link as External

In navigation settings, link to the store locator page as an external link (full URL) rather than internal page link.

#Squarespace Template Compatibility

StoreRocket works with all Squarespace templates, including:

  • Version 7.1 templates: Bedford, Brine, Farro, Skye, Tremont, etc.
  • Version 7.0 templates: Older but still supported

For best results, use a Code block on a full-width page section.

#Mobile Responsiveness

Squarespace handles mobile differently. Ensure:

  1. The Code block is set to display on mobile
  2. Test on actual mobile devices
  3. Verify GPS functionality works
  4. Check that the map is usable on small screens

#Advanced Squarespace Integration

#Matching Your Squarespace Design

StoreRocket can match any Squarespace template:

  1. Note your template's colors (find in Design > Site Styles)
  2. Set StoreRocket's primary color to match
  3. Choose a theme that complements your template style
  4. Adjust fonts if needed via custom CSS

#Integrating with Squarespace Commerce

If you sell online and have physical stores:

  • Link from product pages: "Find in store"
  • Add store locator to checkout for pickup option
  • Use filters to show inventory (with custom development)

#Squarespace Member Areas

For members-only store locators:

  1. Create the store locator page
  2. Add it to a members-only section
  3. Restrict access as needed

#Analytics Tracking

StoreRocket provides its own analytics, but you can also:

  1. Connect to Google Analytics via Squarespace
  2. Track Code block interactions
  3. Use UTM parameters for campaign tracking

#SEO for Squarespace Store Locators

#Page-Level SEO

Configure your store locator page:

  1. Go to page settings
  2. Set SEO title: "Find a Store Near You | [Brand Name]"
  3. Set meta description: "Discover [Brand Name] locations near you. Search by zip code to find stores, hours, and directions."
  4. Set URL slug: /store-locator or /locations

#Local SEO Benefits

For comprehensive local SEO strategies, see our Store Locator SEO Guide.

If you publish individual location pages, use URLs like:

 1yourdomain.com/stores/new-york-downtown
 2yourdomain.com/stores/chicago-loop
 3yourdomain.com/stores/los-angeles-westside

Each page should have unique content and structured data so it can rank for "[brand] + [city]" searches.


#Troubleshooting Squarespace Issues

#Store Locator Not Appearing

Check:

  1. Code block is published (not in draft)
  2. Embed code is complete (no missing parts)
  3. Browser console for JavaScript errors
  4. Ajax loading (see above)

Fix: Try saving the page again or clearing browser cache.

#Map Not Loading

Check:

  1. Your Squarespace site is on HTTPS
  2. No ad blockers interfering
  3. Browser console for errors

#Store Locator Looks Wrong

Check:

  1. Code block width settings
  2. Page section width
  3. Template margin/padding settings

Fix: Set Code block to full width in block settings.

#GPS Not Working

Check:

  1. Site uses HTTPS (required)
  2. User granted location permission
  3. Browser supports geolocation

#Mobile Display Issues

Check:

  1. Code block displays on mobile (block settings)
  2. Page section is mobile-friendly
  3. Test on actual devices, not just browser resize

#Squarespace Store Locator Best Practices

#Placement

  • Create a dedicated "Locations" or "Find a Store" page
  • Add to main navigation
  • Include in footer links
  • Link from relevant content pages

#Design Consistency

  • Match StoreRocket colors to your Squarespace template
  • Use the same fonts/styling where possible
  • Ensure the widget feels integrated, not bolted-on

#Content Strategy

  • Write a brief intro above the store locator
  • Include relevant keywords naturally
  • Add context for visitors

#Mobile Priority

  • Test on mobile first
  • Ensure tap targets are large enough
  • Verify click-to-call works
  • Check GPS functionality

#Frequently Asked Questions

#Which Squarespace plan do I need?

Any Squarespace plan that supports Code blocks (Business or Commerce plans) works. Personal plan has limited Code block support.

#Will this slow down my Squarespace site?

Test the published locator page with your usual performance tools after embedding it.

#Can I match the store locator to my Squarespace template?

Yes. StoreRocket offers full color customization and multiple themes to match any Squarespace design.

#How many locations can I have?

StoreRocket supports up to 10,000 locations, depending on plan.

#Does it work with Squarespace 7.1?

Yes. StoreRocket works with all Squarespace versions and templates.

#Can I capture leads from my store locator?

Yes. StoreRocket includes built-in lead capture forms.


#Get Your Squarespace Store Locator Live

Your beautiful Squarespace site deserves a beautiful store locator. Help visitors find your physical locations with a professional solution that matches your brand.

StoreRocket for Squarespace includes:

  • ✅ Easy Code block installation
  • ✅ Google Sheets sync
  • ✅ Heatmap analytics
  • ✅ Lead capture forms
  • ✅ Custom branding
  • ✅ Mobile-responsive design

Try StoreRocket Free for 7 Days →

No credit card required.


Need help with your Squarespace store locator? Contact our team.

Related Articles