How to Troubleshoot and Resolve Issues with the Store Locator Feature
The Store Locator feature is a powerful tool for displaying store locations on your website. However, users may encounter issues such as the map not displaying, errors with geocoding, or problems caused by theme configurations. This guide provides comprehensive troubleshooting steps to resolve these issues.
Common Issues and Troubleshooting Steps
1. Store Locator Map Not Displaying After an Update
If the Store Locator map disappears after a platform or app update, the app embed settings may have been toggled off. Follow these steps to resolve the issue:
Open your theme editor.
Locate the Store Locator app embed.
Turn it on and save your changes.
Reload the page to confirm the map appears.
2. Errors Loading the Map or Detecting Location
Errors with loading the map or detecting location are often caused by issues with Google Maps APIs. To resolve this:
Ensure that billing is active for your Google Cloud project associated with the Maps API key.
If billing was recently updated (e.g., due to an expired card), refresh your site to apply the changes.
3. Styling and Geocoding Issues After Updates
Recent updates to Google Maps API may have removed older map styles or changed geocoding behavior. This can lead to styling differences or search/centering issues. To address this:
Update your Store Locator settings and app embeds to align with the latest API changes.
4. Re-Enabling the Store Locator After Updates
If the map isn’t showing or settings seem overwritten after an update, ensure the Store Locator app embed is turned on:
Open the app settings.
Turn on the Store Locator app embed for the page.
Save your changes to restore the map display.
Google Maps API and Billing Configuration
Setting Up Google Maps API and Billing
To ensure the Store Locator map loads reliably, follow these steps:
Create or locate a Google Maps API key in your Google Cloud project.
Enable the required Maps APIs.
Ensure billing is active on the project.
Paste the API key into your Store Locator app settings.
Save and test the map.
Without a properly configured API key and billing, the map may not load consistently.
Theme and App Embed Configurations
Avoiding Duplicate Script Loading
Duplicate script loading can occur if your Shopify theme renders the content_for_header output more than once. This can lead to errors. To resolve this:
Check your theme files (e.g.,
theme.liquid,header.liquid) to ensurecontent_for_headeris rendered only once.Remove any duplicate renders.
Reload your storefront and check the browser console to confirm the errors are resolved.
Choosing Between App Embed and App Block
The Store Locator feature offers two display methods in Shopify themes:
App Embed: Toggle it on to display the feature in its default position.
App Block: Add the block in the Theme Editor and drag it to your desired location.
You only need to enable one method per feature. For example:
For the "Find Online" feature, enable either the App Embed or the App Block.
For the "Where to Buy" feature, enable either the App Embed or the App Block.
Ensure the Store Locator App Embed is enabled to control the map display.
Advanced Troubleshooting
Resolving Styling and Search Behavior Issues
If you notice changes in styling or search behavior, it may be due to updates in the Google Maps API. Ensure your app settings and embeds are updated to reflect these changes.
By following these steps, you can resolve most issues with the Store Locator feature and ensure it functions smoothly on your website. For further assistance, consult the app's support documentation or contact customer support.