How to Add a Map to Shopify Store Locator Page (No App Required)

Published on January 15, 2025 • 8 min read

Running multiple Shopify stores or retail locations? A store locator with interactive maps is essential for helping customers find you. While Shopify app stores charge $10-30/month for store locator apps, you can create a professional location page with custom maps completely free.

$29/mo

Average cost of Shopify store locator apps - save this by using free embedded maps

Why You Need a Store Locator on Shopify

If you have physical retail locations alongside your e-commerce store, customers need to easily find your stores. Benefits include:

Increase foot traffic: 78% of customers prefer to see products in person before buying
Build trust: Physical locations signal legitimacy and permanence
Support local SEO: Location pages help you rank for "near me" searches
Reduce support queries: Clear maps reduce "where are you located?" questions
Enable omnichannel: Bridge online and offline shopping experiences

Method 1: Single Location Store (Simplest)

If you have one physical location, this is the easiest approach:

Step 1: Generate Your Map

Go to the Maps Generator tool
Enter your store's complete address
Set width to 800px and height to 500px (works well on Shopify)
Choose zoom level 15 for street-level detail
Click "Generate Map" and then "Copy" the embed code

Step 2: Create a Store Location Page

From your Shopify admin, go to Online Store → Pages
Click Add page
Title it "Visit Our Store" or "Store Location"
Click the <> icon to show HTML
Add your store information and paste the map code:

<h2>Visit Our Store</h2>
<p><strong>Address:</strong><br>
123 Main Street<br>
New York, NY 10001</p>

<p><strong>Hours:</strong><br>
Monday - Friday: 9am - 6pm<br>
Saturday: 10am - 5pm<br>
Sunday: Closed</p>

<p><strong>Phone:</strong> (555) 123-4567</p>

<!-- Paste your map embed code here -->
<iframe width="800" height="500"...></iframe>

Click Save
Add the page to your navigation menu

Pro Tip: Set the page visibility to "Visible" and add it to your main menu or footer navigation for easy access.

Method 2: Multiple Locations (Using Pages)

For 2-10 locations, create individual pages for each store:

Step 1: Create a Main Locations Page

Create a page titled "Our Locations" or "Store Locator"
List all your locations with links:

<h2>Find a Store Near You</h2>

<h3>New York Location</h3>
<p>123 Main St, New York, NY 10001<br>
<a href="/pages/location-new-york">View Details & Map</a></p>

<h3>Los Angeles Location</h3>
<p>456 Oak Ave, Los Angeles, CA 90001<br>
<a href="/pages/location-los-angeles">View Details & Map</a></p>

<h3>Chicago Location</h3>
<p>789 Pine Rd, Chicago, IL 60601<br>
<a href="/pages/location-chicago">View Details & Map</a></p>

Step 2: Create Individual Location Pages

For each location, create a new page (e.g., "location-new-york")
Generate a unique map for each address
Include location-specific information (hours, phone, manager, parking info)
Add photos of that specific store

Method 3: Multiple Locations (Custom HTML Section)

For a more integrated experience, add location maps directly to your homepage or a custom section:

Step 1: Edit Your Theme

Go to Online Store → Themes
Click Customize on your active theme
Navigate to where you want to add the store locator
Add a Custom Liquid section (or HTML if available)

Step 2: Add Tabbed Location Maps

<style>
.location-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.tab-button {
  padding: 10px 20px;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
}
.tab-button.active {
  background: #4285f4;
  color: white;
}
.location-content {
  display: none;
}
.location-content.active {
  display: block;
}
</style>

<h2>Find a Store Near You</h2>

<div class="location-tabs">
  <button class="tab-button active" onclick="showLocation('ny')">New York</button>
  <button class="tab-button" onclick="showLocation('la')">Los Angeles</button>
  <button class="tab-button" onclick="showLocation('chi')">Chicago</button>
</div>

<div id="ny" class="location-content active">
  <h3>New York Store</h3>
  <p>123 Main St, New York, NY 10001</p>
  <!-- Paste NY map embed here -->
  <iframe width="600" height="450"...></iframe>
</div>

<div id="la" class="location-content">
  <h3>Los Angeles Store</h3>
  <p>456 Oak Ave, Los Angeles, CA 90001</p>
  <!-- Paste LA map embed here -->
  <iframe width="600" height="450"...></iframe>
</div>

<script>
function showLocation(id) {
  document.querySelectorAll('.location-content').forEach(el => el.classList.remove('active'));
  document.querySelectorAll('.tab-button').forEach(el => el.classList.remove('active'));
  document.getElementById(id).classList.add('active');
  event.target.classList.add('active');
}
</script>

Advanced: Add "Get Directions" Buttons

Make it even easier for customers to navigate to your store:

<a href="https://www.google.com/maps/dir/?api=1&destination=123+Main+St+New+York+NY"
   style="display: inline-block; background: #4285f4; color: white; padding: 10px 20px;
          text-decoration: none; border-radius: 4px;">
  Get Directions
</a>

Replace the destination parameter with your encoded address.

Optimizing Your Store Locator for Conversions

1. Include Essential Information

Complete address with ZIP code
Phone number (clickable on mobile)
Store hours (including holidays)
Parking information
Public transit directions
Store manager or contact person

2. Add Store-Specific Details

Store photos (exterior and interior)
Available services at each location
In-store pickup availability
Special features (wheelchair accessible, pet-friendly, etc.)

3. Mobile Optimization

Use click-to-call phone numbers: <a href="tel:+15551234567">
Make addresses tappable to open in maps apps
Ensure maps are responsive (set max-width: 100%)
Test on actual mobile devices

4. SEO Optimization

Use location-specific keywords in page titles
Include city/neighborhood names in headings
Add schema markup for local business
Ensure each location page has a unique meta description

47%

Increase in in-store visits when location pages include interactive maps vs. text-only addresses

Troubleshooting Common Issues

Map Not Displaying

Ensure you're using HTML mode, not the visual editor
Check that you copied the complete <iframe> code
Some themes block iframes - try adding to a different section
Clear your browser cache and test in incognito mode

Map Too Small on Mobile

Add this CSS to make maps responsive:

<style>
iframe {
  max-width: 100%;
  height: auto;
}
</style>

Wrong Location Showing

Double-check the address you entered in the generator
Include the full address with ZIP code
Regenerate the map with the corrected address

Comparing Free Maps vs. Paid Apps

Feature	Free Custom Maps	Paid Apps ($10-30/mo)
Cost	$0	$120-360/year
Setup Time	10-15 minutes	5-10 minutes
Customization	Full control	Template-based
Multiple Locations	Yes (manual setup)	Yes (automated)
Best For	1-10 locations	10+ locations

When to Consider a Paid App: If you have 15+ locations that change frequently, or need advanced features like radius search, filtering by services, or automated updates, a paid app might be worth it. For most small-to-medium businesses, free custom maps are perfect.

Next Steps

Now that you have a store locator set up:

Add the location page to your main navigation menu
Link to it from your footer
Mention your physical locations on product pages
Include store info in email newsletters
Add location pages to your Google Search Console
Create location-specific social media posts

Marketing Tip: Export map images using our tool and share them on Instagram Stories when promoting in-store events or sales. Visual location reminders increase attendance by 35%.

Generate Your Store Maps Now