Skip to main content
The Store Locator section displays your physical store locations with an interactive map, store details sidebar, and search functionality. Perfect for businesses with brick-and-mortar locations, this section integrates with Google Maps API to help customers find the nearest store with contact information, hours, and directions - all in one seamless interface. Use this section to drive foot traffic and provide a complete omnichannel experience connecting digital browsing to physical store visits.

​
What this section controls

This section controls store location displays with the following capabilities:
  • Interactive Google Maps integration with location markers
  • Three layout modes (Map & Sidebar, Image & Sidebar, Map Only)
  • Store detail sidebar with contact information and hours
  • Store search and filtering by name or address
  • Configurable section height (25vh to 100vh)
  • Multiple store location blocks
  • Custom zoom levels and map styling
  • Store metaobject integration for dynamic data
  • Color scheme and section width controls

​
Section Settings

​
Section Layout

Setting ID: section_height
Type: Range
Range: 25vh - 100vh
Step: 5vh
Default: 60vhControls the vertical height of the store locator section as a percentage of the viewport height.Height Guidelines:
  • 25-40vh: Compact layout for pages with multiple sections
  • 50-70vh: Standard height for balanced content (⭐ Recommended)
  • 80-100vh: Full-screen or hero-style store locator
Viewport height (vh) is responsive - 60vh means the section takes up 60% of the browser window height on any device.
Setting ID: layout
Type: Select
Options:
  • map_and_sidebar - Interactive map + store list sidebar
  • image_and_sidebar - Static image + store list sidebar ⭐ Default
  • map - Map only (no sidebar)
Choose between interactive map, static image, or map-only layouts.Layout Comparison:
LayoutMapSidebarBest For
Map & SidebarInteractiveStore listFull functionality
Image & SidebarStatic imageStore listNo API key/design focus
Map OnlyInteractiveHiddenMinimal, map-focused design
Use Cases:
  • Map & Sidebar: Full-featured store locator with search
  • Image & Sidebar: When you want control over map appearance without API
  • Map Only: Minimalist design letting map fill entire section
Setting ID: section_width
Type: Select
Options:
  • page - Page width (contained) ⭐ Default
  • fluid - Fluid width (wider container)
  • full - Full width (edge-to-edge)
Controls the maximum width of the section container.Width Recommendations:
  • Page: Standard layout aligned with other page sections
  • Fluid: Wider map for better geographic visibility
  • Full: Edge-to-edge map for maximum impact

​
Color Schemes

Setting ID: color_scheme
Type: Color Scheme
Default: scheme-1Main color scheme for the overall section background and container.
Setting ID: color_scheme_find_store
Type: Color Scheme
Default: scheme-4Color scheme specifically for the “Find Store” search/filter area.
Use a contrasting color scheme here to make the search functionality stand out and encourage interaction.
Setting ID: color_scheme_store_container
Type: Color Scheme
Default: scheme-1Color scheme for individual store information cards in the sidebar.Design Strategy:
  • Match with primary scheme for cohesive design
  • Use subtle contrast to differentiate store cards
  • Ensure readability of store details

​
Google Maps Configuration

Setting ID: api_key
Type: Textarea
Required: Yes (for map layouts)Your Google Maps API key for displaying interactive maps.How to Get API Key:
  1. Visit Google Cloud Console
  2. Create a new project or select existing
  3. Enable Maps JavaScript API
  4. Go to Credentials → Create Credentials → API Key
  5. Copy the API key
  6. (Recommended) Restrict key to your domain
  7. Paste key in this setting
Important: Restrict your API key to your Shopify domain to prevent unauthorized use and unexpected charges.
API Key Security:
  • Set HTTP referrer restrictions in Google Cloud Console
  • Add your domain: yourstore.myshopify.com/*
  • Monitor usage in Google Cloud billing dashboard
Setting ID: zoom_level
Type: Range
Range: 0 - 21
Step: 1
Default: 4Controls the default zoom level of the map.Zoom Level Guide:
  • 0-3: World/continental view (multiple countries)
  • 4-6: Country/regional view ⭐ Default range
  • 7-10: State/province view
  • 11-14: City view
  • 15-18: Neighborhood/district view
  • 19-21: Street-level view
Choose zoom level based on your store distribution. If stores are in one city, use 11-14. If nationwide, use 4-6.

​
Spacing & Borders

Setting ID: spacing_top
Type: Select
Options: 0 (None), 1 (S), 2 (M), 4 (L), 6 (XL)
Default: 2 (M)Vertical spacing above the section.
Setting ID: spacing_bottom
Type: Select
Options: 0 (None), 1 (S), 2 (M), 4 (L), 6 (XL)
Default: 2 (M)Vertical spacing below the section.
Setting ID: section_border
Type: Select
Options: none, top, bottom, both
Default: noneAdd decorative borders to section edges.

​
Pin Blocks (Store Locations)

Each pin block represents a physical store location on the map and in the sidebar.

​
Store Information

Block Setting ID: title
Type: TextName of the store location.Examples:
  • “Downtown Flagship Store”
  • “New York - SoHo”
  • “Los Angeles Westfield Mall”
  • “Chicago Michigan Avenue”
Include location identifier in the title to help customers quickly identify the nearest store.
Block Setting ID: store_address
Type: TextareaFull address of the store.Format Example:
123 Main Street
Suite 200
New York, NY 10001
United States
Best Practices:
  • Include full street address
  • Add suite/unit numbers if applicable
  • Include city, state/province, postal code
  • Add country for international stores
Block Setting ID: store_tel
Type: TextStore phone number.Format Examples:
  • +1 (555) 123-4567 - US format with country code
  • +44 20 1234 5678 - UK format
  • (555) 123-4567 - Without country code
Including country code (+1, +44, etc.) helps with international customers and enables click-to-call on mobile devices.
Block Setting ID: store_opening_hours
Type: Rich TextStore operating hours and schedule.Example:
<p>Monday - Friday: 10am - 8pm<br/>
Saturday: 10am - 9pm<br/>
Sunday: 11am - 6pm</p>

<p>Holiday hours may vary</p>
Formatting Tips:
  • Use <br/> tags for line breaks
  • Group similar days together
  • Include special notes (holidays, seasonal hours)
  • Consider adding timezone for clarity
Block Setting ID: store_image
Type: Image PickerPhoto of the store location.Image Recommendations:
  • Dimensions: 800x600px minimum
  • Aspect Ratio: 4:3 or 16:9 works well
  • Content: Storefront exterior, interior, or recognizable landmark
  • Quality: High-resolution, good lighting
What to Show:
  • Store exterior/facade (helps customers recognize)
  • Interior shots (sets expectations)
  • Nearby landmarks (aids navigation)
  • Team photos (adds personal touch)
Block Setting ID: color_scheme
Type: Color Scheme
Default: scheme-1Individual color scheme for this specific store card.
You can use different color schemes for different stores to create visual variety or highlight flagship locations.

​
Geographic Coordinates

Block Setting ID: store_latitude
Type: Text
Required: Yes (for map pins)Latitude coordinate for map pin placement.Example: 40.7580 (New York City)How to Find Coordinates:Method 1 - Google Maps:
  1. Go to Google Maps
  2. Search for your store address
  3. Right-click on the exact location
  4. Click the coordinates at the top (they’ll copy automatically)
  5. Paste into settings - first number is latitude
Method 2 - GPS Coordinates:
  1. Visit GPS Coordinates
  2. Enter your address
  3. Copy the latitude value
Ensure coordinates are accurate - incorrect values will place pins in wrong locations or cause map errors.
Block Setting ID: store_longitude
Type: Text
Required: Yes (for map pins)Longitude coordinate for map pin placement.Example: -73.9855 (New York City)Coordinate Format:
  • Positive values: East of Prime Meridian
  • Negative values: West of Prime Meridian
  • Typical format: -122.4194 (6-7 digits with decimals)
When copying from Google Maps, the format is: latitude, longitude. The second number is longitude.
Block Setting ID: coordinate_title
Type: TextareaAlternative title displayed when clicking the map pin.Use Cases:
  • Show a different name on map vs. sidebar
  • Add additional context (e.g., “Available for pickup”)
  • Include neighborhood or district name
  • Add special notes (e.g., “Temporarily closed for renovation”)
Example:
Downtown Flagship
Now offering same-day pickup!
Leave blank to use the main store title. Use this only when you need different information on the map.

​
Action Button

Block Setting ID: store_pin
Type: TextText for the action button displayed on each store card.Common Labels:
  • “Get Directions”
  • “View on Map”
  • “Navigate”
  • “Directions”
  • “Find Us”
Block Setting ID: button_style
Type: Select
Options:
  • button--filled - Solid filled button
  • button--outlined - Outlined border style ⭐ Default
  • default - Link style (no button styling)
Visual style for the directions/action button.

​
Preset Configuration

The Store Locator comes with one complete preset including two sample stores:

​
Default Preset

Settings:
  • Layout: image_and_sidebar
  • Section Height: 60vh
  • Zoom Level: 4
  • Two pre-configured pin blocks
Sample Store 1 (Paris):
  • Title: “Your store name”
  • Address: “Your store address”
  • Phone: “+01 234 567 8900”
  • Hours: “Mon-Sat: 10am-8pm, Sunday”
  • Latitude: 48.85850418716008
  • Longitude: 2.294803163425021
  • Button: “Directions”
Sample Store 2 (Rome):
  • Title: “Your store name”
  • Address: “Your store address”
  • Phone: “+01 234 567 8900”
  • Hours: “Mon-Sat: 10am-8pm, Sunday”
  • Latitude: 41.902331905731444
  • Longitude: 12.45445667605574
  • Button: “Directions”
Replace these sample values with your actual store information and coordinates.

​
Common Use Cases

​
1. Multi-Location Retail Chain

Scenario: Fashion brand with 10+ stores across multiple cities Configuration:
  • Layout: map_and_sidebar
  • Section Height: 70vh (larger for better map visibility)
  • Zoom Level: 6 (country/regional view)
  • Section Width: fluid (wider map area)
  • Add pin block for each store location
Pin Block Setup (per store):
  • Title: Include city name (e.g., “New York - Manhattan”)
  • Full address with landmarks if helpful
  • Store-specific phone number
  • Accurate hours (may vary by location)
  • Store photo showing exterior
  • Google Maps directions link

​
2. Single Flagship Store

Scenario: One main store with detailed information Configuration:
  • Layout: map_and_sidebar
  • Section Height: 60vh
  • Zoom Level: 15 (street-level detail)
  • Section Width: page
  • Single pin block with comprehensive details
Pin Block Setup:
  • Detailed title with brand name
  • Full address including suite/floor
  • Multiple contact methods (phone, email)
  • Detailed hours including special events
  • Multiple photos (exterior, interior, team)
  • Parking/transit information in opening hours field

​
3. Regional Store Networks

Scenario: Stores clustered in specific regions Configuration:
  • Layout: map_and_sidebar
  • Section Height: 65vh
  • Zoom Level: 8-10 (city/metro view)
  • Color-coded by region using different color schemes per pin
Example:
  • California stores: scheme-2 (blue)
  • Texas stores: scheme-3 (green)
  • New York stores: scheme-4 (purple)

​
4. Appointment-Only Showrooms

Scenario: By-appointment locations, not traditional retail Configuration:
  • Layout: image_and_sidebar
  • Section Height: 50vh (less emphasis on map)
  • Button Label: “Book Appointment”
  • Button Link: Link to booking page instead of directions
Pin Block Setup:
  • Title: “Private Showroom - [City]”
  • Address: General area only (street address via appointment)
  • Phone: Appointment line
  • Hours: “By Appointment Only - Call to Schedule”
  • Professional showroom photos

​
Layout Configurations

​
Map & Sidebar Layout

Best For: Full-featured store locator with search and filtering Features:
  • Interactive Google Maps on left/right
  • Scrollable store list in sidebar
  • Click pins to view store details
  • Search/filter functionality
Visual Structure: 
┌──────────────────┬─────────────┐
│                  │  Find Store │
│   Interactive    │  (Search)   │
│   Google Map     ├─────────────┤
│   with Pins      │  Store #1   │
│                  │  Details    │
│                  ├─────────────┤
│                  │  Store #2   │
│                  │  Details    │
└──────────────────┴─────────────┘

​
Image & Sidebar Layout

Best For: Design-focused presentation without API configuration Features:
  • Static image or styled map graphic
  • Store directory in sidebar
  • No API key required
  • Full design control over “map” area
Use Cases:
  • Testing layout before API setup
  • Artistic/illustrated map preference
  • Limited store count (list is primary)
  • Budget constraints (no Google Maps charges)
Visual Structure: 
┌──────────────────┬─────────────┐
│                  │  Store List │
│   Static Map     ├─────────────┤
│   Image or       │  Store #1   │
│   Graphic        │  Details    │
│                  ├─────────────┤
│                  │  Store #2   │
│                  │  Details    │
└──────────────────┴─────────────┘

​
Map Only Layout

Best For: Minimalist, map-focused design Features:
  • Full-width interactive map
  • No sidebar (stores accessed via pins)
  • Maximum map visibility
  • Clean, uncluttered interface
Use Cases:
  • Few stores (3-5) - no need for list
  • Map as hero element
  • Modern, minimal aesthetic
  • Mobile-first design (pins → details)
Visual Structure: 
┌─────────────────────────────┐
│                             │
│    Full Width Interactive   │
│         Google Map          │
│         with Pins           │
│                             │
│  (Click pins for details)   │
│                             │
└─────────────────────────────┘

​
Best practices

Accurate Coordinates

Double-check latitude/longitude values. Incorrect coordinates will break the map or show pins in wrong locations.

Complete Information

Fill out all fields for each store - address, phone, hours, image. Incomplete listings frustrate customers.

Mobile-Friendly Hours

Format opening hours clearly with line breaks. Mobile users need scannable information quickly.

High-Quality Images

Use clear, well-lit photos. Storefront exteriors help customers recognize the location when arriving.

Secure Your API Key

Restrict your Google Maps API key to your domain. Monitor usage to avoid unexpected charges.

Test Directions Links

Verify that Google Maps directions links work correctly on both desktop and mobile devices.

Update Hours Regularly

Keep holiday hours and special closures current. Nothing frustrates customers more than arriving to closed doors.

Consider Zoom Level

Set default zoom based on store distribution. Clustered stores need higher zoom than spread-out locations.

​
Design Tips

​
Creating Effective Store Cards

Essential Information Hierarchy:
  1. Store Title (most prominent)
    • Include location identifier
    • Keep concise but descriptive
  2. Address (clearly formatted)
    • Full street address
    • City, state, postal code
    • Country (if applicable)
  3. Contact (clickable if possible)
    • Phone number with country code
    • Email (if available)
  4. Hours (easy to scan)
    • Use line breaks between days
    • Highlight current day (if dynamic)
    • Note special hours
  5. Store Image (visual recognition)
    • Storefront or entrance
    • Interior ambiance
    • Nearby landmarks
  6. Action Button (strong CTA)
    • Clear label (“Get Directions”)
    • Links to navigation
    • Stands out visually

​
Color Scheme Strategy

Option 1 - Unified Design:
  • Same color scheme for all stores
  • Creates cohesive, professional look
  • Recommended: scheme_store_container = scheme-1
Option 2 - Regional Differentiation:
  • Different schemes by region/city
  • Helps customers quickly identify location groups
  • Example: Blue for East Coast, Green for West Coast
Option 3 - Flagship Highlighting:
  • Standard scheme for regular stores
  • Contrasting scheme for flagship/featured locations
  • Draws attention to primary locations

​
Map Optimization

Performance Tip: If you have many stores (20+), consider using a higher default zoom level (8-10) to avoid overwhelming the map with pins on first load.
Zoom Level by Store Count:
Store CountRecommended ZoomCoverage
1-3 stores12-15Street/neighborhood
4-10 stores8-11City/metro area
11-25 stores5-7State/region
26+ stores3-5National/continental

​
Accessibility Considerations

Ensure the store locator is fully accessible to screen reader users and keyboard navigation.

​
Accessibility Checklist

Keyboard Navigation:
  • All store cards focusable via Tab key
  • Map controls accessible without mouse
  • Buttons have clear focus indicators
Screen Reader Support:
  • Store information in logical reading order
  • Map has descriptive aria-labels
  • Coordinate values hidden from screen readers (visual only)
Color Contrast:
  • Store card text meets WCAG AA standards (4.5:1)
  • Button labels clearly visible
  • Map pins distinguishable
Alternative Text:
  • Store images have descriptive alt text
  • Example: “Storefront of Downtown Manhattan location”
Semantic HTML:
  • Use proper heading hierarchy (H2 for store names)
  • Lists for multiple stores
  • Landmarks for map and sidebar regions

​
Troubleshooting

Problem: Map area is blank or shows errorSolutions:
  1. Check API Key:
    • Verify key is entered correctly (no extra spaces)
    • Ensure Maps JavaScript API is enabled in Google Cloud
    • Check API key restrictions aren’t blocking your domain
  2. Verify Billing:
    • Google Maps requires billing account (even for free tier)
    • Check Google Cloud Console billing status
  3. Check Browser Console:
    • Open Developer Tools (F12)
    • Look for Maps API error messages
    • Common errors indicate API key or billing issues
  4. Test Layout:
    • Switch to image_and_sidebar temporarily
    • Confirms if issue is map-specific or section-wide
Problem: Pins appear in incorrect places on mapSolutions:
  1. Verify Coordinates:
    • Double-check latitude/longitude values
    • Ensure no typos or decimal point errors
    • Confirm order is correct (latitude first, longitude second)
  2. Test Coordinates:
    • Paste into Google Maps search: latitude,longitude
    • Verify it shows your intended location
  3. Check Coordinate Format:
    • Should be decimal format: 40.7580,-73.9855
    • NOT degrees/minutes/seconds format
    • Negative values for West longitude, South latitude
  4. Re-obtain Coordinates:
    • Use Google Maps to get fresh coordinates
    • Right-click exact location → Copy coordinates
Problem: Store photos missing or brokenSolutions:
  1. Check Image Upload:
    • Verify image was successfully uploaded
    • Not just selected but saved in Theme Customizer
  2. Image Format:
    • Use JPEG, PNG, or WebP
    • Avoid TIFF or other unsupported formats
  3. File Size:
    • Keep images under 5MB
    • Optimize for web before uploading
  4. Browser Cache:
    • Hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
    • Clear browser cache
    • Test in incognito mode
Problem: Default zoom level doesn’t show relevant areaSolutions:
  1. Adjust Zoom Setting:
    • Lower zoom = see more area (country/region)
    • Higher zoom = closer detail (street level)
  2. Consider Store Distribution:
    • Stores in one city: Use zoom 11-14
    • Stores nationwide: Use zoom 4-6
    • International stores: Use zoom 2-4
  3. Test User Experience:
    • Ensure at least 2-3 stores visible on load
    • Users can zoom in/out as needed
    • Balance overview vs. detail

​
Technical Details

​
Section Limits

Limit: 1 section per page This section is limited to one instance per page. If you need multiple store locator sections, create separate pages for different regions.

​
Block Types

Pin Block (pin):
  • Single block type for store locations
  • Add multiple pin blocks (one per store)
  • No limit on number of pins
  • Each pin represents one physical location

​
Schema Structure

{
  "name": "t:sections.store-locator.name",
  "tag": "section",
  "class": "section-store-locator",
  "limit": 1,
  "blocks": [
    {
      "type": "pin",
      "name": "Store Pin"
    }
  ]
}

​
SEO Considerations

​
Local SEO Benefits

The Store Locator section can improve local search rankings:
  1. Structured Data: Consider adding LocalBusiness schema markup
  2. NAP Consistency: Ensure Name, Address, Phone match across web
  3. Unique Content: Write unique descriptions for each store
  4. Local Keywords: Include city/neighborhood names in titles

​
NAP Best Practices

Name, Address, Phone (NAP) Consistency:
  • Use exact same business name across all listings
  • Identical address formatting on all platforms
  • Consistent phone number format
  • Match with Google My Business listings

​
Integration Tips

​
Combine with Other Sections

Before Store Locator:
  • Page Banner - “Visit Our Stores” headline
  • Rich Text - Introduction to retail experience
After Store Locator:
  • FAQ - Store policies, parking, accessibility
  • Newsletter - Stay updated on new locations

​
Dedicated Store Page

Create a /pages/stores template with:
  1. Page Banner - Hero image of flagship store
  2. Rich Text - Brand story and retail philosophy
  3. Store Locator - Interactive map with all locations
  4. Testimonials - Customer reviews of in-store experience
  5. FAQ - Store-specific questions
  • Map - Similar single-location map section
  • Page Banner - Hero for store locator pages
  • Rich Text - Store policy information
  • Contact Form - For store-specific inquiries

​
Quick Reference

​
Essential Settings

SettingRecommended ValuePurpose
Layoutmap_and_sidebarFull functionality
Section Height60-70vhBalanced visibility
Zoom Level4-6 (nationwide)
11-14 (local)		Appropriate coverage
API KeyYour Google Maps keyEnable interactive map

​
Per-Store Checklist

  • Store title (with location)
  • Complete address
  • Phone number (with country code)
  • Opening hours (formatted with line breaks)
  • Store photo (800x600px minimum)
  • Accurate latitude coordinate
  • Accurate longitude coordinate
  • Directions button link
  • Color scheme (if using regional coding)

​
Summary

The Store Locator section is a comprehensive solution for showcasing physical retail locations with: Interactive Google Maps integration
Detailed store information cards
Responsive layouts (map & sidebar, image & sidebar, map-only)
Click-to-call phone numbers
Direct navigation links
Customizable color schemes per store
Flexible zoom and height controls
Mobile-optimized design
Pro Tip: Set up your Store Locator on a dedicated /pages/stores page, then link to it from your main navigation and footer. This creates a central hub for all store information and improves local SEO.

​
Example Complete Configuration

Scenario: Fashion brand with 5 stores across 3 cities Section Settings: 
Layout: map_and_sidebar
Section Height: 65vh
Section Width: fluid
Zoom Level: 7 (metro region view)
Color Scheme: scheme-1
Find Store Color Scheme: scheme-4 (contrast)
Store Container Color Scheme: scheme-2
API Key: [Your Google Maps API Key]
Pin Block 1 - Flagship: 
Title: New York - Fifth Avenue Flagship
Address: 123 Fifth Avenue, New York, NY 10001
Phone: +1 (212) 555-0100
Hours: Mon-Sat: 10am-9pm | Sun: 11am-7pm
Image: [Storefront photo]
Latitude: 40.7580
Longitude: -73.9855
Button Label: Get Directions
Button Link: https://www.google.com/maps/dir/?api=1&destination=40.7580,-73.9855
Button Style: button--filled (flagship emphasis)
Color Scheme: scheme-3 (flagship highlight)
Pin Blocks 2-5: Similar format for other locations with accurate coordinates and details. Result: Professional, functional store locator helping customers find and visit your physical locations with all information readily accessible.