How to Add a Store Locator to Magento

Want to add a store locator or dealer locator to your Magento store? This guide covers Page Builder, the WYSIWYG editor, and CMS Blocks.

What is Storepoint?

Storepoint is a store locator that adds a searchable location finder to your Magento storefront. Use it as a store locator, dealer locator, distributor finder, or "where to buy" product locator.

No Magento extension to install. Just paste a simple embed code into a CMS Page.

Here's what makes it great:

• No extension conflicts. Runs from our servers. No modules to install, no database migrations, no PHP version issues.
• Works in production mode. Loads from our CDN. No static content to deploy, no RequireJS issues.
• Powerful search. Customers search by address, zip code, or automatic geolocation.
• Filters and categories. Help customers find dealers or retailers that carry specific products.
• Works with any theme. Luma, Hyvä, Blank, or fully custom themes.

Start Your Free Trial See Examples

The whole process takes just a few minutes.

Step 1: Set Up Your Locator

1. Sign up or log in to your Storepoint dashboard
2. Add your locations — enter them in the dashboard, import a spreadsheet, or sync from Google Sheets
3. Go to Embed in the sidebar and copy your embed snippet

Open Storepoint Dashboard

Step 2: Create a CMS Page

1. In the Magento Admin Panel, go to Content → Elements → Pages
2. Click Add New Page
3. Enter a Page Title like "Store Locator", "Find a Dealer", or "Where to Buy"
4. Set the URL Key to something clean like store-locator or find-a-dealer
5. Under Page in Websites, select the store views where the page should appear

Now add your embed code using one of the methods below.

Step 3: Add the Embed Code

Using Page Builder (Recommended)

Page Builder is the default content editor in Magento 2.4 and Adobe Commerce.

1. Expand the Content section - Page Builder opens automatically
2. In the left panel under Elements, find HTML Code
3. Drag the HTML Code element onto the stage
4. Hover over the element and click the gear icon (Settings) to edit
5. Paste your Storepoint embed code into the HTML field
6. Click Save on the element
7. Click Save on the page

Using the WYSIWYG Editor

If Page Builder is disabled or you prefer the classic editor:

1. Expand the Content section
2. Click Show/Hide Editor to switch to HTML source mode
3. Paste your Storepoint embed code
4. Click Save

Using a CMS Block (For Reuse Across Pages)

If you want to embed the locator on multiple pages or in your layout:

1. Go to Content → Elements → Blocks
2. Click Add New Block
3. Enter a Block Title (e.g., "Store Locator Widget") and a unique Identifier
4. Switch to HTML source mode (click Show/Hide Editor)
5. Paste your Storepoint embed code
6. Save the block

You can then insert this block into any CMS Page using Page Builder's Block element, or reference it in your layout XML.

Step 4: Enable and Test

1. Make sure the page is set to Enable under Page Information
2. Set Layout to 1 column for a full-width locator (under Design section)
3. Click Save
4. Visit the page on your storefront and test searching for a location

That's it!

Adding to Your Navigation

To make your locator easy to find:

• Top navigation: Add a link via your theme's layout XML or a menu module. The URL will be whatever you set as the URL Key (e.g., /store-locator).
• Footer links: Edit your footer CMS Block (usually Content → Elements → Blocks → Footer Links) and add a link to your locator page.
• Header links: Some themes let you add top links via Content → Design → Configuration → Header.

Content Security Policy (CSP)

If your Magento store uses Content Security Policy headers, you may need to whitelist storepoint.co and your map provider's domains. Add the following to your CSP configuration:

• script-src: https://*.storepoint.co
• frame-src: https://*.storepoint.co
• For Google Maps: https://*.googleapis.com and https://*.gstatic.com
• For Mapbox: https://*.mapbox.com

If your locator doesn't appear or shows a blank space, check your browser console for CSP errors.

Need Help?

Run into any issues? Contact us with a link to your page and we'll help get it sorted. We're happy to assist!

Make It Your Own

Now that your locator is live, explore what else you can do:

• Add filters and tags so customers can find dealers carrying specific products
• Customize the design to match your storefront
• Set up multiple languages for international audiences
• Build a product locator with product filtering and purchase links
• Learn about embed options for filtered or multilingual locators