Building a Store Locator page

Enable App

After installed our app, you need to enable the app before go to next step.

From the app admin, click the Settings on the left sidebar -> General -> Enable App -> Click the "Go to Theme Settings > App Embeds" button -> Enable the app by swiping the button to turn blue -> Click the Save button.

Disable App

From the app admin, click the Settings on the left menu -> General -> Enable App -> Click the "Go to Theme Settings > App Embeds" button -> Disable the app by swiping the button to turn gray -> Click the Save button

Add Location

Before adding locations to the store list, You need to create your own Google API Key to ensure that the app works properly and smoothly (About 5 minutes to complete this).

--> How to generate Google Map API Key: https://sl-guide.storeify.app/google-map-api-key/generating-and-setting-api-keys

Note: You need to enable the list of required APIs and enable billing on the Google Cloud Project.

Don't worry about the cost when using Google Maps service,, currently Google Map has free caps for each plan, only when you exceed these caps, you have to pay (about 10k maploads): https://mapsplatform.google.com/pricing/

Once you have the API Key, go to Settings -> General -> Google map API key -> Add API Key

Add a store location

Go to Locations on the left menu -> click the Add location button in the top right corner. Put your store information under "Add Location" box. Please see the screenshot below:

Note: to ensure the location is displayed on the map, you must tick the option "Show location on store locator page".

Add store locations by importing file

Use an Excel file

Go to Locations on the left menu -> click the Import button in the top right corner.

1. Download the sample file by clicking the Download Sample button.

2. Use Excel or Google Sheet to edit the sample Excel file and add your stores. Some columns in excel file: - name: Put the store location name (required). For example: Store 01 - url_key: It is a url keyword to link to the detailed location page (optional). Contains no special characters, only alphanumeric and - . For example: store-01 - status: Put 1 to enable location, 0 to disable location (required). - thumbnail: Put logo/image URL of location (optional). - email: Email address (optional). - web_text: Website text (optional). - web: Website URL (optional). - street: (required). For example: 7207 Chagrin Road, Suite #1 - city: (required). For example: Chagrin Falls - region: (optional). For example: OH - postcode: (optional) For example: 44023 - country: (required). For example: United States - lat: Latitude of location (required if importing by OPTION 2 - With Lat & Long) - lng: Longitude of location (required if importing by OPTION 2 - With Lat & Long) - telephone: Phone number (optional). - description: This value will be displayed on the detailed location page (optional). - schedule: This value will be displayed on the detailed location page (optional) - sort_order: Use natural numbers to sort order locations (0, 1, 2, 3,...). You can change the sort ascending or descending in the app settings. Default: 0 (optional). - products: Help customers can search the location based on the product name. Also available products will be displayed on the detailed location page.(optional) - tags: (optional). For example: Open 24h,Free Wifi

3. Import the Excel file with your store locators OPTION 1 - Without Lat & Long: If your Excel has NOT got the Lat & Long value, please use this option. OPTION 2 - With Lat & Long: If your Excel has the Latitude and Longitude for all locations, please use this option to import them one time only.

Excel sample

Use a spreadsheet

To use this feature, go to Locations on the left menu -> click the Import button in the top right corner -> Import the Google Sheet

Import locations with products

From our excel sample file, you will see the products column. See screenshot below

Use product IDs, each ID is separated by comma.

Import locations with schedule (Operation Hours)

Please see the caption in the image below to fill in the correct information for the Schedule column.

Import locations with social networks

Please see the caption in the image below to fill in the correct information for the Social column.

Export store locations

1. Go to Locations on the left menu -> click the Export button in the top right corner.

2. Click the Download CSV/ Download Excel xls/ Download Excel (xlsx) button.

Edit Location

Go to Locations on the left menu, on the "Locations" grid, you can see all locations you added. Click the edit icon to edit a location. The location editing interface is completely similar to the location adding interface.

Update latitude & longitude for location manually

For some reason, the longitude and latitude of the location are not correct, you can adjust these parameters manually.

Please go to Edit location -> Preview

How to Get Latitude & Longitude Using Google Gemini AI

1. Visit https://aistudio.google.com/prompts/new_chat
2. Select Gemini 2.0 Flash (Image Generation) Experimental

3. Use this prompt: "Help me get latitude and longitude for the addresses below and generate a table with 3 columns: Address, Latitude, Longitude." Then, paste your list of addresses under the prompt.

   
4. Copy the results and paste each column into the matching column in our sample file.

5. Finally, use Option 2: With Lat & Long to import your Excel file.

✅ Tip: You can also do this using other AI tools like ChatGPT

Important Considerations:

Data Source: The latitude and longitude were obtained using a geocoding service. Different services might provide slightly different results.

Accuracy: While generally accurate, geocoding can sometimes place a point at the center of a building or a general area. For very precise locations, especially within large buildings, more specific information might be needed.

Unit Numbers: Unit numbers (like #200, Suite A, Unit C-104) are generally included in the geocoding process, leading to a more specific location.

Delete Location

Go to Locations on the left menu, on the "Locations" grid, you can see all locations you added. Click the delete icon to delete a location.

Delete all locations with a single click of the Delete all locations button above the list.

Enable All Locations

Go to Locations on the left menu, on the "Locations" grid, you can see all locations you added. To enable all inactive locations, follow these steps:

1. Select Disabled Locations in the top right Select box.

2. Click the Enable All button.

Disable All Locations

Go to Locations on the left menu, click the Locations from the left sidebar. On the "Locations" grid, you can see all locations you added. To disable all active locations, follow these steps:

1. Select Enabled Locations in the top right Select box.

2. Click the Disable All button.

Frontend - Store Locator page

Now let's see your results via link https://your-shopifydomain.com/a/store-locator/list

For example: https://storeify-demo.myshopify.com/a/store-locator/list

You can also add the store locator map to any page:

Add the store locator map to a page on Vintage Theme

You can also embed the Store Locator map anywhere by adding the shortcode: [storeify-storelocator]

Add store locator to the page on Store Online 2.0

The application supports adding Store Locator to the page in an intuitive way compatible with Online Store 2.0.

1️⃣ Go to Shopify Admin → Click on Online Store → Themes. 2️⃣ Find your current theme and click Customize. 3️⃣ In the theme editor, navigate to the page where you want to add the store locator. 4️⃣ Click Add Section or Add Block, then look for S: Store Locator. 5️⃣ Select it, and Save your changes.

(Another way: In app backend, go to Theme setup -> Select theme -> Click the Go to Theme Editor > App Embeds button)