# Building a Store Locator page

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

<figure><img src="/files/SIWLW0DDXHAbY7YEMrSo" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/KoBifeZyAfWBwxIF0xec" alt=""><figcaption></figcaption></figure>

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

## **3. Add Location**

{% hint style="info" %} <mark style="background-color:red;">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).</mark>

<mark style="background-color:red;">--> How to generate Google Map API Key:</mark> [<mark style="background-color:red;">https://sl-guide.storeify.app/google-map-api-key/generating-and-setting-api-keys</mark>](https://sl-guide.storeify.app/google-map-api-key/generating-and-setting-api-keys)

<mark style="background-color:red;">**Note**</mark><mark style="background-color:red;">:</mark> <mark style="background-color:red;"></mark>*<mark style="background-color:red;">You need to enable the list of required APIs and enable billing on the Google Cloud Project.</mark>*

<mark style="background-color:red;">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  (</mark><mark style="background-color:red;">**about 10k maploads**</mark><mark style="background-color:red;">):</mark> [<mark style="background-color:red;">https://mapsplatform.google.com/pricing/</mark>](https://mapsplatform.google.com/pricing/)

<mark style="background-color:red;">Once you have the API Key, go to</mark> <mark style="background-color:red;"></mark><mark style="background-color:red;">**Settings**</mark> <mark style="background-color:red;"></mark><mark style="background-color:red;">-></mark> <mark style="background-color:red;"></mark><mark style="background-color:red;">**General**</mark> <mark style="background-color:red;"></mark><mark style="background-color:red;">-></mark> <mark style="background-color:red;"></mark><mark style="background-color:red;">**Google map API key**</mark> <mark style="background-color:red;"></mark><mark style="background-color:red;">-> Add API Key</mark>
{% endhint %}

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

<figure><img src="/files/11iufrm8lLMnaqwpEQZk" alt=""><figcaption></figcaption></figure>

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

### 3.2. Add store location**s** by importing file

#### 3.2.1. 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 (*<mark style="color:red;">required</mark>*). 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 (*<mark style="color:red;">required</mark>*).\
   \- **thumbnail:** Put logo/image URL of location (*optional*).\
   \- **email**: Email address (*optional*).\
   \- **web\_text**: Website text (*optional*).\
   \- **web**: Website URL (*optional*).\
   \- **street**: (*<mark style="color:red;">required</mark>*). For example: *7207 Chagrin Road, Suite #1*\
   \- **city**: (*<mark style="color:red;">required</mark>*). For example: *Chagrin Falls*\
   \- **region**: (*optional*). For example: *OH*\
   \- **postcode**: (*optional*) For example: *44023*\
   \- **country**: (*<mark style="color:red;">required</mark>*). For example: *United States*\
   \- **lat**: Latitude of location (*<mark style="color:red;">required</mark>* if importing by OPTION 2 - With Lat & Long)\
   \- **lng**: Longitude of location (*<mark style="color:red;">required</mark>* 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*&#x20;

   ![Excel sample](/files/b9Ito6sSMyMGA9JqNgXk)
3. Import the Excel file with your store locators

With the Excel file import feature, you can use files with or without Lat & Long data.\
**OPTION 1 - Without Lat & Long:** *<mark style="color:$warning;">With this option, the import process might be a bit slow because the server has to use a lot of resources to complete it. However, you don't need to leave the screen on until it finishes; the process will run automatically in the background, and you can completely turn off the screen to do other things</mark>*.\
**OPTION 2 - With Lat & Long (***<mark style="color:$danger;">**Highly recommended**</mark>***):** If your Excel has the Latitude and Longitude for all locations, the import process will not require calling the Google Maps API, and the completion speed will be much faster than option 1.

Here's how to get longitude and latitude for numerous locations using AI: [https://sl-guide.storeify.app/building-a-store-locator-page#id-5.-how-to-get-latitude-and-longitude-using-google-gemini-ai)](https://sl-guide.storeify.app/building-a-store-locator-page#id-5.-how-to-get-latitude-and-longitude-using-google-gemini-ai)

<figure><img src="/files/pxuWTOrZb3w2KQexPzPo" alt=""><figcaption></figcaption></figure>

**IMPORT STEPS:**

<figure><img src="/files/sVD9lLZyyeWDTQZYVtE7" alt=""><figcaption></figcaption></figure>

<mark style="color:$warning;">If you check "</mark><mark style="color:$warning;">**Overwrite duplicate locations**</mark><mark style="color:$warning;">", when importing the file, any locations in the current list in the admin app that are duplicates of locations in the file will be overwritten.</mark>

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

**Note**: *To import from Google Sheet, the Google sheet structure must be the same as the sheet structure in the sample file. You should download the sample file to refer to the sheet structure.*

<figure><img src="/files/qpppG5WHLE1uUguCbVHa" alt=""><figcaption></figcaption></figure>

### 3.3. Import locations with products

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

<figure><img src="/files/QmYvWMm4Mo3P9jpNYTVy" alt=""><figcaption></figcaption></figure>

Use product IDs, product variant IDs, each ID is separated by comma.

If you only want to display the product, then just use the Product ID.

If you want to display variations of a product, use the following data structure: **PRODUCT\_ID\[Variant\_ID1, Variant\_ID2].**&#x20;

Exampl&#x65;**:** 6868392018085\[40212651901093,40212652097701]

* **Product ID**: 6868392018085
* **Variant IDs**: 40212651901093,40212652097701

*If you add all variant IDs of a product to the data, only that product will be displayed in the product list*.

### 3.4. Import locations with schedule (Operation Hours)

The data of the Schedule column is as follows:

**{"mon":{"status":"on","from":\["00","00"],"to":\["00","00"],"break\_from":\["00","00"],"break\_to":\["00","00"]},"tue":{"status":"on","from":\["00","00"],"to":\["00","00"],"break\_from":\["00","00"],"break\_to":\["00","00"]},"wed":{"status":"on","from":\["00","00"],"to":\["00","00"],"break\_from":\["00","00"],"break\_to":\["00","00"]},"thu":{"status":"on","from":\["00","00"],"to":\["00","00"],"break\_from":\["00","00"],"break\_to":\["00","00"]},"fri":{"status":"on","from":\["00","00"],"to":\["00","00"],"break\_from":\["00","00"],"break\_to":\["00","00"]},"sat":{"from":\["00","00"],"to":\["00","00"],"break\_from":\["00","00"],"break\_to":\["00","00"]},"sun":{"from":\["00","00"],"to":\["00","00"],"break\_from":\["00","00"],"break\_to":\["00","00"]}}**

* **mon, tue, wed, thu, fri, sat, sun:** Days of the week
* **status**: **on** is open, blank is closed
* **from - to**: working time of day
* **break\_from** - **break\_to**: break time during the day
* Time data is in 24-hour format. For example, if the opening time is **9AM** and closing time is **5PM**, the time data would be: **from":\["09","00"],"to":\["17","00"]**

### 3.5. Import locations with social networks

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

<figure><img src="/files/koRz8VnHL9R0iIw8Mz9f" alt=""><figcaption></figcaption></figure>

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

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

![](/files/T07hY7JV8Bbg9h3jCG0g)

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

![](/files/BlOlSlEdJz17qOu8PJWo)

## 5. 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:\
   \&#xNAN;*"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.<br>

   <figure><img src="/files/M1WA1789xL2mVdqlSeHI" alt=""><figcaption></figcaption></figure>
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](https://chatgpt.com/)

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

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

To delete all locations, follow the 2 steps in the image below:

<figure><img src="/files/hQ4OgHYEcbLVoUyQCF91" alt=""><figcaption></figcaption></figure>

## **7. 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 **Draft** menu on the top.
2. Tick the checkbox right below **All** to select all locations.
3. Click the **Set as active** button.

## **8. 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 **Active** menu on the top.
2. Tick the checkbox right below **All** to select all locations.
3. Click the **Set as draft** button.

## **9. Frontend - Store Locator page**

Now let's see your results via link <https://your-shopifydomain.co&#x6D;**/a/store-locator/list>\*\*

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

![](/files/-MbewKnb_EFBDxn1JHLl)

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

## 10. 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]**

![](/files/zOJXqpOX8PAnfUZkdTRi)

## 11. 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** -> **Apps ->** **S: Store Locator**\
5️⃣ Select it, and **Save** your changes

*Another way*: In app dashboard, go to **Setup Guide** section -> **Add Store Locator block (Optional)** -> Click **Add block**

<figure><img src="/files/iaRWxcomkDYiJGhuW7xD" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sl-guide.storeify.app/building-a-store-locator-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.