> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Store Locator

> Interactive store location finder with Google Maps integration and store directory in the Sahara Shopify theme

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

<AccordionGroup>
  <Accordion title="Section Height">
    **Setting ID:** `section_height`\
    **Type:** Range\
    **Range:** 25vh - 100vh\
    **Step:** 5vh\
    **Default:** 60vh

    Controls 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

    <Note>
      Viewport height (vh) is responsive - 60vh means the section takes up 60% of the browser window height on any device.
    </Note>
  </Accordion>

  <Accordion title="Map Layout">
    **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:**

    | Layout          | Map          | Sidebar    | Best For                    |
    | --------------- | ------------ | ---------- | --------------------------- |
    | Map & Sidebar   | Interactive  | Store list | Full functionality          |
    | Image & Sidebar | Static image | Store list | No API key/design focus     |
    | Map Only        | Interactive  | Hidden     | Minimal, 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
  </Accordion>

  <Accordion title="Section Width">
    **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
  </Accordion>
</AccordionGroup>

***

### Color Schemes

<AccordionGroup>
  <Accordion title="Color Scheme (Primary)">
    **Setting ID:** `color_scheme`\
    **Type:** Color Scheme\
    **Default:** `scheme-1`

    Main color scheme for the overall section background and container.
  </Accordion>

  <Accordion title="Find Store Color Scheme">
    **Setting ID:** `color_scheme_find_store`\
    **Type:** Color Scheme\
    **Default:** `scheme-4`

    Color scheme specifically for the "Find Store" search/filter area.

    <Tip>
      Use a contrasting color scheme here to make the search functionality stand out and encourage interaction.
    </Tip>
  </Accordion>

  <Accordion title="Store Container Color Scheme">
    **Setting ID:** `color_scheme_store_container`\
    **Type:** Color Scheme\
    **Default:** `scheme-1`

    Color 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
  </Accordion>
</AccordionGroup>

***

### Google Maps Configuration

<AccordionGroup>
  <Accordion title="API Key">
    **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](https://console.cloud.google.com/)
    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

    <Warning>
      **Important:** Restrict your API key to your Shopify domain to prevent unauthorized use and unexpected charges.
    </Warning>

    **API Key Security:**

    * Set HTTP referrer restrictions in Google Cloud Console
    * Add your domain: `yourstore.myshopify.com/*`
    * Monitor usage in Google Cloud billing dashboard
  </Accordion>

  <Accordion title="Zoom Level">
    **Setting ID:** `zoom_level`\
    **Type:** Range\
    **Range:** 0 - 21\
    **Step:** 1\
    **Default:** 4

    Controls 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

    <Note>
      Choose zoom level based on your store distribution. If stores are in one city, use 11-14. If nationwide, use 4-6.
    </Note>
  </Accordion>
</AccordionGroup>

***

### Spacing & Borders

<AccordionGroup>
  <Accordion title="Spacing Top">
    **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.
  </Accordion>

  <Accordion title="Spacing Bottom">
    **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.
  </Accordion>

  <Accordion title="Section Border">
    **Setting ID:** `section_border`\
    **Type:** Select\
    **Options:** none, top, bottom, both\
    **Default:** none

    Add decorative borders to section edges.
  </Accordion>
</AccordionGroup>

***

## Pin Blocks (Store Locations)

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

### Store Information

<AccordionGroup>
  <Accordion title="Store Title">
    **Block Setting ID:** `title`\
    **Type:** Text

    Name of the store location.

    **Examples:**

    * "Downtown Flagship Store"
    * "New York - SoHo"
    * "Los Angeles Westfield Mall"
    * "Chicago Michigan Avenue"

    <Tip>
      Include location identifier in the title to help customers quickly identify the nearest store.
    </Tip>
  </Accordion>

  <Accordion title="Store Address">
    **Block Setting ID:** `store_address`\
    **Type:** Textarea

    Full 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
  </Accordion>

  <Accordion title="Store Phone">
    **Block Setting ID:** `store_tel`\
    **Type:** Text

    Store 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

    <Note>
      Including country code (+1, +44, etc.) helps with international customers and enables click-to-call on mobile devices.
    </Note>
  </Accordion>

  <Accordion title="Store Opening Hours">
    **Block Setting ID:** `store_opening_hours`\
    **Type:** Rich Text

    Store operating hours and schedule.

    **Example:**

    ```html theme={null}
    <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
  </Accordion>

  <Accordion title="Store Image">
    **Block Setting ID:** `store_image`\
    **Type:** Image Picker

    Photo 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)
  </Accordion>

  <Accordion title="Color Scheme (Per Store)">
    **Block Setting ID:** `color_scheme`\
    **Type:** Color Scheme\
    **Default:** `scheme-1`

    Individual color scheme for this specific store card.

    <Tip>
      You can use different color schemes for different stores to create visual variety or highlight flagship locations.
    </Tip>
  </Accordion>
</AccordionGroup>

***

### Geographic Coordinates

<AccordionGroup>
  <Accordion title="Store Latitude">
    **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](https://maps.google.com)
    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](https://www.gps-coordinates.net/)
    2. Enter your address
    3. Copy the latitude value

    <Warning>
      Ensure coordinates are accurate - incorrect values will place pins in wrong locations or cause map errors.
    </Warning>
  </Accordion>

  <Accordion title="Store Longitude">
    **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)

    <Note>
      When copying from Google Maps, the format is: `latitude, longitude`. The second number is longitude.
    </Note>
  </Accordion>

  <Accordion title="Coordinate Title">
    **Block Setting ID:** `coordinate_title`\
    **Type:** Textarea

    Alternative 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!
    ```

    <Tip>
      Leave blank to use the main store title. Use this only when you need different information on the map.
    </Tip>
  </Accordion>
</AccordionGroup>

***

### Action Button

<AccordionGroup>
  <Accordion title="Button Label">
    **Block Setting ID:** `store_pin`\
    **Type:** Text

    Text for the action button displayed on each store card.

    **Common Labels:**

    * "Get Directions"
    * "View on Map"
    * "Navigate"
    * "Directions"
    * "Find Us"
  </Accordion>

  <Accordion title="Button Link">
    **Block Setting ID:** `store_pin_link`\
    **Type:** URL

    URL for the button action - typically a Google Maps directions link.

    **Google Maps Directions Link Format:**

    ```
    https://www.google.com/maps/dir/?api=1&destination=LATITUDE,LONGITUDE
    ```

    **Example:**

    ```
    https://www.google.com/maps/dir/?api=1&destination=40.7580,-73.9855
    ```

    **What Happens:**

    * Opens Google Maps in new tab
    * Shows directions from user's current location
    * Works on desktop and mobile
    * Mobile opens native Google Maps app

    <Tip>
      Use the store's latitude and longitude in the destination parameter for accurate directions.
    </Tip>
  </Accordion>

  <Accordion title="Button Style">
    **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.
  </Accordion>
</AccordionGroup>

***

## 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"

<Note>
  Replace these sample values with your actual store information and coordinates.
</Note>

***

## 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

<CardGroup cols={2}>
  <Card title="Accurate Coordinates" icon="location-dot">
    Double-check latitude/longitude values. Incorrect coordinates will break the map or show pins in wrong locations.
  </Card>

  <Card title="Complete Information" icon="circle-info">
    Fill out all fields for each store - address, phone, hours, image. Incomplete listings frustrate customers.
  </Card>

  <Card title="Mobile-Friendly Hours" icon="clock">
    Format opening hours clearly with line breaks. Mobile users need scannable information quickly.
  </Card>

  <Card title="High-Quality Images" icon="image">
    Use clear, well-lit photos. Storefront exteriors help customers recognize the location when arriving.
  </Card>

  <Card title="Secure Your API Key" icon="key">
    Restrict your Google Maps API key to your domain. Monitor usage to avoid unexpected charges.
  </Card>

  <Card title="Test Directions Links" icon="route">
    Verify that Google Maps directions links work correctly on both desktop and mobile devices.
  </Card>

  <Card title="Update Hours Regularly" icon="calendar">
    Keep holiday hours and special closures current. Nothing frustrates customers more than arriving to closed doors.
  </Card>

  <Card title="Consider Zoom Level" icon="magnifying-glass">
    Set default zoom based on store distribution. Clustered stores need higher zoom than spread-out locations.
  </Card>
</CardGroup>

***

## 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

<Tip>
  **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.
</Tip>

**Zoom Level by Store Count:**

| Store Count  | Recommended Zoom | Coverage             |
| ------------ | ---------------- | -------------------- |
| 1-3 stores   | 12-15            | Street/neighborhood  |
| 4-10 stores  | 8-11             | City/metro area      |
| 11-25 stores | 5-7              | State/region         |
| 26+ stores   | 3-5              | National/continental |

***

## Accessibility Considerations

<Warning>
  Ensure the store locator is fully accessible to screen reader users and keyboard navigation.
</Warning>

### 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

<AccordionGroup>
  <Accordion title="Map not displaying">
    **Problem:** Map area is blank or shows error

    **Solutions:**

    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
  </Accordion>

  <Accordion title="Store pins in wrong locations">
    **Problem:** Pins appear in incorrect places on map

    **Solutions:**

    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
  </Accordion>

  <Accordion title="Directions link not working">
    **Problem:** "Get Directions" button doesn't open maps

    **Solutions:**

    1. **Check URL Format:**
       ```
       Correct: https://www.google.com/maps/dir/?api=1&destination=40.7580,-73.9855
       Incorrect: https://maps.google.com/?q=address (old format)
       ```

    2. **Verify Coordinates in URL:**
       * Ensure latitude,longitude in destination parameter
       * No spaces in URL
       * HTTPS (not HTTP)

    3. **Test on Multiple Devices:**
       * Desktop should open new tab
       * Mobile should prompt for Google Maps app
       * Incognito mode (rules out extensions)

    4. **Alternative Format:**
       ```
       https://www.google.com/maps/search/?api=1&query=LATITUDE,LONGITUDE
       ```
  </Accordion>

  <Accordion title="Store images not displaying">
    **Problem:** Store photos missing or broken

    **Solutions:**

    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
  </Accordion>

  <Accordion title="Sidebar not scrolling">
    **Problem:** Can't scroll through store list

    **Solutions:**

    1. **Check Section Height:**
       * If section\_height is too large, sidebar may not overflow
       * Try reducing to 60vh or lower

    2. **Browser Zoom:**
       * Reset browser zoom to 100%
       * Some zoom levels affect scrolling behavior

    3. **CSS Conflicts:**
       * Check for custom CSS affecting overflow
       * Test with theme defaults (remove customizations temporarily)

    4. **Store Count:**
       * With only 1-2 stores, sidebar won't need scrolling
       * Add more stores to test scroll functionality
  </Accordion>

  <Accordion title="Map zoom too close/far">
    **Problem:** Default zoom level doesn't show relevant area

    **Solutions:**

    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
  </Accordion>
</AccordionGroup>

***

## 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

```json theme={null}
{
  "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

***

## Related Sections

* **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

| Setting        | Recommended Value                   | Purpose                |
| -------------- | ----------------------------------- | ---------------------- |
| Layout         | map\_and\_sidebar                   | Full functionality     |
| Section Height | 60-70vh                             | Balanced visibility    |
| Zoom Level     | 4-6 (nationwide)<br />11-14 (local) | Appropriate coverage   |
| API Key        | Your Google Maps key                | Enable 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

<Tip>
  **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.
</Tip>

***

## 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.