# About S: Store Locator

## Highlight Features

#### 1. Unlimited store locations

Add unlimited locations (your own stores/your dealer's stores) to store locator map, this will help customers select from all the locations.

#### 2. Powerful & useful features

Bulk upload locations with a CSV file/spreadsheet, add location detail page, connect products, add meta tags, tracking code, heat-map view

#### 3. Bring customers to store

Easily search for stores by location/postcode/store name/product name and show physical locations of your stores on store locator map.

<details>

<summary>Add app: <a href="https://apps.shopify.com/storeify-store-locator">https://apps.shopify.com/storeify-store-locator</a></summary>

</details>

### **What is Store Locator & Map?**

![](/files/-MbiuYqXwxyHVfz4krtK)

Our Store Locator app will help you show all your physical stores on a single page on your Shopify website. Use Google maps to display store locations with exact addresses to make the shopping process as easy as it can be. With our app, you can add an unlimited number of store addresses that will be conveniently displayed and ordered as per your personal preferences.

## **App Features**

### **Storeify Store Locator App Key Features**

* Search store by location/postcode/store name/product name
* Bulk import store locations by uploading CSV file
* Change store locator page layout, map style, maker icon, etc
* Detail page and a contact form for each store/dealer
* Create a Dealer registration form & submission report
* Email service integrations
* Add your store a sticky icon to open store locator pop-up everywhere
* Search Analytics: Heatmap recent searches view, area charts, search data download
* Show the store list in a city by shortcode
* Multi-language (*It is not possible to automatically switch the language for the store name or store url in the location list*) - **Available from Pro plan**

### **Other Storeify Store Locator App Features**

#### FOR STORE ADMIN

* Create and manage multiple store locations
* Quick setup for a store locator/dealer locator page
* Show the Store locator map to any page via an app block / embedded code (including shopping cart page)
* Use Google maps to display store locations with exact store location addresses
* Unlimited locations: You can add an unlimited number of stores to the "Our Stores" page
* Add Marker clusters to Google Map
* Use many different maker icons ([How to do](https://sl-guide.storeify.app/faqs#6.-how-to-use-difference-maker-icons))
* For each store, you can add information like name, phone number, e-mail address, store address, postcode, ZIP code, etc
* Automatically calculate longitude and latitude from the store address
* The "Sort Order" field will help you arrange the stores in a specific order
* Upload store thumbnail
* Bulk import stores
* Export stores
* Delete all store locations with a click
* Contact form for each store
* Store detail page: show store description, contact information, hours of operation, and can show selected store products
* Set up SMTP to use your own email server
* Translate the language on the store locator page
* Compatible with multi-language apps (eg: Translation Lab, Langify...)
* Custom CSS, change color & map style.

#### FOR CUSTOMERS

* Easy to find a store by location/postcode/store name/product name
* Quickly Search the Nearest Store: your customers can use the function “Use My Location” feature that can automatically identify the customer's location then suggest stores are located within the radius that has been set
* Google Map Suggestion: Your customers just need to enter a few characters, then all relevant suggestions will come up in an auto-drop down list
* View full store list with custom pin icon on Google Maps
* Get instant directions from a location to any stores/dealers
* Mouse hover event on location highlights a maker on the map
* Easy to contact each store directly via address, phone, email address, or quick contact form.

<details>

<summary>Add app: <a href="https://apps.shopify.com/storeify-store-locator">https://apps.shopify.com/storeify-store-locator</a></summary>

</details>


# Pricing Plans

## All available plans

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


# Install app

Directly go to this link: [S: Store Locator](https://apps.shopify.com/storeify-store-locator) to install the app.

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

After adding the app to the store is complete, You need to go to the app dashboard and follow the recommended steps :

{% hint style="info" %} <mark style="background-color:red;">Make sure you have a</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;">before proceeding with the next steps.</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/)
{% endhint %}

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

**If you want to preview the app on an unpublished theme, then follow the steps below:**

Go to  **Theme setup** from the left sidebar -> Select the theme you want to apply -> Click the "Go to Theme Editor **> App Embeds**" ->  Click the **Save** button in the upper right corner.

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

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


# 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:\
   *"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>


# Showing location list in a city

With this feature, you can filter the list of store locations individually for each city. You can use this list to describe each city.

To use this feature, go to Settings -> General -> **Store list page** section -> Enable **Show locations by city on a Page**

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

You use the shortcod&#x65;**:** **\[storeifyStorelocator city="City name"]** to show a list of store locations in the city.

![](/files/GPR80oW6CBPpFFhyOw3r)


# Create the details page

The details page displays all the information of each location of the store such as contact information, working hours, products available at the location, etc.

![](/files/ayC0BAQCMidt8Rr0RxUG)

To display the details page, you need to enter the Url Key for each location.

![](/files/1d5HS8AN0yHqh4Z9nS5a)

In addition to the overview information displayed similar to the store list, the details page of each location can also display the description, working hours, and products available. In this Edit section you can add these informations.

![](/files/2yYkT0zAxS8YNVuM7Ui1)

<figure><img src="/files/8LQXoAAXem8CxtIfW5Dr" alt=""><figcaption></figcaption></figure>

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

<mark style="color:$warning;">Note</mark>: If you select all variations of a product, the product list will only display that product; if you select some variations (not all), the product list will display the selected product variations.


# Find store location in cart page

The store owner can add a store search widget to the shopping cart page so that customers can find the desired store through Zip code, store name, location, etc.

To set up this feature, you need to follow these steps:

* In app backend, go to **Settings** -> **General** -> Scroll down to the bottom -> **Add location to cart page** -> Tick it
* Go to **Online Store** -> **Themes** -> **Customize** -> Select **Cart** page -> **Add block** -> **Apps** -> Select " **Add location to cart**" <br>

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

<figure><img src="/files/DtTvHdQzMh8cbIIwfLWB" alt=""><figcaption><p>The position of the widget depends on your drag and drop</p></figcaption></figure>

If the store search returns results, the customer can select a store to checkout, the address of this store will be added to the **Additional Details** box of the order.

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

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


# Theme setup

This menu helps you enable the app in any theme of the store you want.&#x20;

Of course, to make the app work on the theme, you need to add the app block or add short-code to the landing page.

To enable the app for the theme, select the theme you want to apply -> Click the "**Go to Theme Editor > App Embeds**" -> Click the **Save** button in the upper right corner.


# Settings

he **Settings** section is where you enable app, set the necessary properties and customizations for the Store Locator page.

### General

Here you need to enter the Google Map API Key to activate the map.&#x20;

{% hint style="info" %} <mark style="background-color:red;">To use the app smoothly and stably for a long time, you need to create a Google Map API Key (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 %}

**Note**:

In addition, you can also set the *store listing display,* *number of fields visibility on the list and on the map*, *sort order type, search method, search radius, map zoom*, etc.

<figure><img src="/files/4ZXTD7eHnMT2OYDGpaug" alt=""><figcaption></figcaption></figure>

### Appearance

In this tab, you can choose layout style, map style, upload the maker icon, and customize the map interface with CSS code.

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

### Translate

Default language is English, you can translate to any language in **Default** tab.&#x20;

Multi-language is supported. To use the language feature, click **Add language**, then translate this tab to the new language. However, ***the app cannot automatically translate the store name***.

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

Besides manually translating by filling in the corresponding text fields, you can also use the app's auto-translation feature. By clicking the "Auto translate" button and waiting a few seconds, the app will complete the translation for you.

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

### Email

In this tab, you set the email content to be sent to the store email when a customer submit the Contact Form on store detail page. You can also set up Google reCaptcha for contact form and dealer form here.

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

### SEO

Customize page title, page description for **SEO optimization** and embed the tracking code.

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

### Optimize

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

In some cases, you just want all of the Store locator source code to be called only on a specific page (including CSS and JS files), go to the **Optimize** tab and enter the URL Key of the page.

For example, the url of the store locator page is "*<https://domain.com/pages/store-locator/>"* then the URL Key will be "**store-locator".**


# Analytics

This menu helps you to get statistics of recent searches, show search heat map and export search statistics to excel file.

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


# Dealer form

This is a form that helps store owners collect information about who wants to be their dealer.

## Enable Form

The application automatically generates a form with basic fields, you just need to enable it. Please go to **Dealer form** on the left sidebar -> **Active form** tab -> **Enable Form**

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

## Edit Form

Depending on your needs, you can completely customize the form easily.

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

### **Email Settings**

In this tab you need to set up an email address to receive notifications each time the form is submitted. In addition, you also need to set up the content of the email to be suitable for the purpose (the application has automatically generated sample content that may not be suitable for you).

![](/files/PmbMV8f6yX3e3OvlDUHH)

### Email Integrations

The application is integrated with 8 most popular email services: **Mailchimp, Klaviyo, Campaign Monitor, GetResponse, Omnisend, Google Sheets, Active Campaign, HubSpot.**

With this feature, you can collect customer emails for email marketing strategies.

![](/files/uKBfVAEVb9a6qFHTa7rK)

## Add form to page

### By add block

Go to **Dealer form** -> **Active form** -> **Enable form** and **Add form block** to any page you want.

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

### By add form short-code

At the Active Form tab, you get the short-code of the form: <mark style="background-color:blue;">**\[storeifyapps-dealer-form]**</mark> , then you add it to the content of the page.

![](/files/tjmznwk2thdO6M7C5FwW)

## How to add the submitted Dealer location to the Store Locator page?

First, let's see what fields are needed to create a valid location through the image below:

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

Next, you need to create a form with the necessary fields for a valid location so that subscribers can fill out and submit.

### How to add the correct fields to create a valid location?

In the step of adding a new field, be sure to select the correct field type for the location listed in the select-box at the bottom.

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

This selection helps you to create standard fields for the form, and once the form is submitted, the location information will be pushed to the **Location** tab of the **Submission details**.

The final step of adding the submitted location to the Store locator page is to go to **Submissions** on the left sidebar-> **Submission Details** tab -> **View details** -> Select **Location** tab -> Click the **Add to location list** button.


# SMTP

To set up the SMTP configuration, go to the **SMTP** menu on the left sidebar.

At this menu,  you can configure your own email server service. In some cases, when you use the application's email server, emails sent to you or your customers may end up in the spam box. To prevent this, you should use your own email server and see the provider's parameters to fill in this section.

### 1. Use SMTP authenticate <a href="#id-1.-use-smtp-authenticate" id="id-1.-use-smtp-authenticate"></a>

We will guide you to set up SMTP with Gmail (if you use another email service, the setup is similar, just the parameters, you can get these parameters from the email service provider or search on Google).

**Important:** To create an app password, you need 2-Step Verification on your Google Account.

If you use 2-Step-Verification and get a "password incorrect" error when you sign in, you can try to use an app password.

1. Go to your [Google Account](https://myaccount.google.com/).
2. Select **Security**
3. Under "Signing in to Google," select **2-Step Verification**.
4. At the bottom of the page, select **App passwords**.
5. Enter a name that helps you remember where you’ll use the app password.
6. Select **Generate**.
7. To enter the app password, follow the instructions on your screen. The app password is the 16-character code that generates on your device.
8. Select **Done**.

**Final**: Go to our contact form app admin -> SMTP and put your Gmail information

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

**Note**: *You must receive a success message when you click the Test connection button for the configuration to be considered successful*.

### 2. Use OAuth 2.0 (Applies only to Google OAuth and Microsoft Office365 OAuth) <a href="#id-2.-use-oauth-2.0-applies-only-to-google-oauth-and-microsoft-office365-oauth" id="id-2.-use-oauth-2.0-applies-only-to-google-oauth-and-microsoft-office365-oauth"></a>

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

* If you use Gmail, you need to have the **Client ID** and **Client Secret** of the account. And here's a guide on how to create a Client ID and Client secret in Google Cloud Console: <https://sl-guide.storeify.app/google-map-api-key/how-to-get-client-id-and-client-secret-in-google-cloud-console>
* If you use Microsoft Office365 email, you need to have the **Client ID**, **Tenant ID** and **Client Secret**. And here's a guide on how to create the Client ID, Tenant ID and Client Secret in Microsoft Azure: <https://sl-guide.storeify.app/google-map-api-key/how-to-get-client-id-tenant-id-and-client-secret-in-microsoft-azure>


# How to Upgrade or Downgrade Your Plan

Follow these steps to change your subscription plan in the app:

### 1. Navigate to the Pricing Page

* From the left-hand menu, go to Apps.
* Select Store Locator.
* Click on Pricing (as highlighted in the screenshot).

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

### 2. Review Available Plans

* You will see multiple plans such as:
  * Free
  * Startup
  * Pro
  * Advanced
  * Platinum
  * Unlimited
* Each plan displays:
  * Monthly price
  * Features included
  * Store location limits
  * Free trial availability (if applicable)

### 3. Upgrade Your Plan

To upgrade to a higher plan:

1. Locate the plan you want to upgrade to.
2. Click the Select / Upgrade button (button text may vary depending on your current plan).
3. Confirm the subscription in the Shopify billing popup.
4. Your new plan will be activated immediately after confirmation.

### 4. Downgrade Your Plan

To switch to a lower plan:

1. Find the plan you want to downgrade to.
2. Click the Downgrade button under that plan.
3. Confirm the change when prompted.

Note:

* Downgrading may result in feature limitations (e.g., fewer store locations).
* If your current usage exceeds the new plan’s limits, you may need to reduce data (e.g., store locations) before downgrading.

### 5. Apply a Discount Code (Optional)

* At the top of the Pricing page:
  1. Enter your discount code in the Discount code field.
  2. Click Apply code.
* The discount will be applied to your selected plan if valid.

### 6. Important Notes

* Free Trial: Some plans include a 14-day free trial.
* Billing Cycle: Charges are handled by Shopify and follow your store’s billing cycle.
* Immediate Effect: Plan changes take effect right after confirmation.


# How to Uninstall S: Store Locator from Your Shopify Admin

If you no longer need the S: Store Locator app, you can uninstall it from your Shopify admin in just a few steps.

***

### Step 1: Go to the Apps Section

1. Log in to your Shopify admin
2. From the left-hand menu, click Settings > Apps

***

### Step 2: Locate the App

1. In the Installed apps list, find S: Store Locator
2. Click the three-dot (⋯) menu next to the app

***

### Step 3: Uninstall the App

1. From the dropdown menu, click Uninstall
2. Confirm the uninstallation when prompted

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

***

### Important Notes

* Once uninstalled, the app will be removed from your store immediately
* Any app-related configurations may be deleted
* Billing for the app will stop according to Shopify’s billing policy

***

### Need Help Before Uninstalling?

If you’re experiencing issues or considering uninstalling due to a problem, we recommend contacting support first. Our team can help resolve most issues quickly.


# FAQs

Summary of frequently asked questions

<details>

<summary>1.Why does the map show the message: "This page can't load Google Maps correctly"?</summary>

A common cause of this problem is related to billing. To solve the problem you need to enable billing on the Google Cloud Project at <https://console.cloud.google.com/project/_/billing/enable>

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

| **API**                        | **Free Tier/Month** | **Overage Cost (USD/1,000 requests)** | **Plan**   |
| ------------------------------ | ------------------- | ------------------------------------- | ---------- |
| **Geocoding API**              | 10,000 requests     | $5.00                                 | Essentials |
| **Geolocation API**            | 10,000 requests     | $5.00                                 | Essentials |
| **Maps JavaScript API**        | 10,000 requests     | $7.00                                 | Essentials |
| **Places API - Autocomplete**  | 10,000 requests     | $2.83                                 | Essentials |
| **Places API - Place Details** | 10,000 requests     | $5.00                                 | Essentials |
| **Places API - Nearby Search** | 5,000 requests      | $32.00                                | Pro        |
| **Street View Static API**     | 10,000 requests     | $7.00                                 | Essentials |

</details>

<details>

<summary>2. Why does the map show the message: "Oops! Something went wrong."?</summary>

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

The main cause of your problem has to do with the **Store Locator page url** not being authorized with Google MAP Service. You need to add this url to the Google Maps API Referrer list according to the following instructions: <https://sl-guide.storeify.app/google-map-api-key/security-for-api-keys>

</details>

<details>

<summary>3. Why is the short-code added to the page but the map is not showing?</summary>

You may not have set up to allow the map to be displayed on the landing page.&#x20;

Please go to **Settings** -> **Optimize** -> **Load app on** -> Select the type of page you want the map to display

If following the above method and the map still does not appear, then there is a possibility that there is a conflict between the theme and the app, please contact us to get the best support.

</details>

<details>

<summary>4. Why is the map not displayed on the homepage?</summary>

To show the store locator on the homepage, go to **Settings** -> **Optimize** -> Check the "**Homepage**".

This is simply the way the app optimizes the store's speed.

</details>

<details>

<summary>5. I have just changed my store theme and the Store Locator map doesn't work anymore</summary>

In this case, you just need to go to **Theme setup** from the left sidebar -> Select the theme you want to apply -> Just click the "**Go to Theme Settings > App Embeds**" -> Click the **Save** button in the upper right corner.

*(Another way*: In app dashboard, go to **Setup Guide** section ->  **Enable the app embed block** -> Click the **Active app embed** button)

</details>

<details>

<summary>6. Why add new/delete/edit locations but store front is not updated?</summary>

To fix the issue, please follow these steps:

1. Go to Theme setup from the left sidebar -> Select the theme you want to apply -> Just click the "Go to Theme Settings > App Embeds" -> Click the Save button in the upper right corner.
2. One more small step to make sure the app works faster and without redundant code:

&#x20;      Go to Online Store -> Themes -> Select theme -> Actions -> Edit code -> Open the theme.liquid file ->  Find and remove lines of code with "**storeify**".

**`{% include 'storeifyapps-storelocator-header' %}`**

**`{% include 'storeifyapps-storelocator-footer' %}`**

</details>

<details>

<summary>7. How to use difference maker icons?</summary>

If you just want to change the default Google maker icon for all locations on the map, then go to **Settings** -> **Appearance** ->  **Map Styles** -> **Maker icon** -> **Upload image file** (image size is 40x40px recommended)

But if you want to use different icon maker for different locations then you need to upload the image to the intermediate server, then go to **Locations** -> **Edit location** -> **Location maker icon url** -> Enter the link to the uploaded image (Shopify server is recommended)

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

To add maker icons for multiple locations, you can also do it by importing the file.

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

</details>

<details>

<summary>8. The location's latitude and longitude are wrong, how do I correct them?</summary>

Please go to **Locations** -> **Edit location** -> Make sure you have checked "**Auto update the Lat & Long. Uncheck to update the Lat & Long manually.**" in the **Preview** box.

Then move your mouse over any field related to the Location's address and click it. The location's latitude and longitude data will automatically be updated correctly.

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

</details>

<details>

<summary>9.How to update multiple existing locations quickly?</summary>

The fastest steps to update existing locations:

1. Export the current location list to a CSV file.
2. Update the locations in the exported list.
3. Delete all locations in app admin.
4. Import the updated list.

</details>

<details>

<summary>10. How to active all location at once?</summary>

To enable all locations at once, please see the instructions in the image below:

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

</details>

<details>

<summary>11.How to activate all locations that are in draft status?</summary>

To activate all locations that are in draft status, follow these steps:\
Go to **Locations** -> Click on the **Draft** tab -> Check "**Select All**" -> Click on the "**Set as active**" button

</details>

<details>

<summary>12.How to sort store list?</summary>

You can sort the store list by 3 options: order number, store creation time and store name.&#x20;

To select the sorting option, go to **Settings** -> **General** -> **Store list page** -> **Store list order by** -> **Select the sorting option**

For the Sort order option, you need to set up the order number for each store. See image below.

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

</details>

<details>

<summary>13.Why does the submission notification email only show the short-code instead of the content?</summary>

The reason for the problem is that the pre-filled short-code in the email content is just a sample short-code and it can vary from store to store. In the backend app, go to **Dealer Form** -> **Email Settings** -> **Email message** -> Reselect the required fields using **Choose custom filed** select box

</details>

<details>

<summary>14.Is it possible to create multiple store locator maps?</summary>

It is possible. We can customize based on the location filter tag.

For example: for the map #1, locations will be added the tag01. For the map #2, location will be added the tag02

We will create short-codes for each map.

**Note**: *Creating multiple maps is not a default feature of the app, so this customization is charged. Please contact us if you need it.*

</details>

<details>

<summary>15.Why is searching by location not giving any results?</summary>

Searching by location depends on two criteria: location and radius. Google Map determines the center coordinates of the area and then scans by radius. If no location is found, try increasing the radius.

</details>

<details>

<summary>16.Got this error: "API keys with referer restrictions cannot be used with this API" when importing file, how to fix?</summary>

To fix this issue, please follow the instructions below:<br>

* Go to Google Cloud Console > APIs & Services > Credentials -> Located the key -> Edit -> API restrictions -> Select "**Don't restrict key**" -> Save
* Import file
* After successful import, please reselect "**Restict key**" in Google Map API Key settings

</details>

<details>

<summary>17.Why does the email notification content not display data fields but display short-codes?</summary>

The reason for the problem is that the pre-filled short-code in the email content is just a sample short-code and it can vary from store to store. In the backend app, go to **Dealer Form** -> **Email Settings** -> **Email content** -> Reselect the required fields using **Select box**

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

</details>


# Our Happiness Customers

Here are a few pictures of Store locator page from some of the thousands of customers who are using and happy with our app.

![](/files/2HQRYnEeOt33dxD4irfC)

![](/files/Ii41l4J88KL2NSQHxDja)

![](/files/OIwEgf5S3rh7RSmMYDWf)

![](/files/22XdmESfJrglnmrjn18x)

![](/files/KdUju2YgPcsvlQKo40VC)

![](/files/dHvvwggw7va2MQVhxHLy)

![](/files/XwMXaqgKH4NL0QOcyJsr)

![](/files/ufFWvt4rQdrDTr73peY9)

![](/files/BAlFMkx0VavttruCtsze)

![](/files/fSYRnKsVOIHuquuDqAV7)

![](/files/uYxadDOw9A6NSt00hf1v)

![](/files/OYJKUlqzaSebDpDGLLEG)

![](/files/20ycMJrbsJWx8msy0Md6)

![](/files/DALeTdjTJLKveDWPjrbp)

![](/files/G3b0HTtUoATHmmPmlDNP)

![](/files/uZgiekSiQFkZ3WfWLkmd)

![](/files/ftoqDgZHdMyGk87wmjZz)

![](/files/lbFWTNjw9H64KTQvwXwB)

![](/files/Wr01ebjkc3LP2O8pY0jP)

![](/files/ftBQlAUUhFgIFQf8jyxE)


# Generating and Setting API Keys

## S**TEP 1: Create your first Google Cloud Console**

* Log in to the [Google Maps Platform Console](https://cloud.google.com/maps-platform/).
* Select [**Get Started**](https://console.cloud.google.com/google/maps-apis/start)**.**
* Create new project if you didn't have one.

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

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

## **STEP 2: Create the Billing Account**

* Go to the [Google Cloud Platform Console](https://console.cloud.google.com/getting-started?_ga=2.11775924.1445112601.1599583344-2118790495.1599583344).
* Click the menu button and select **Billing**.
* Set up your billing account.
  * If this is your first billing account, select **Add billing account.**
  * If you already have a billing account, select **Manage billing accounts.**
* Select **Create account,** then follow the instructions to set up your next billing account.

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

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

| **API**                        | **Free Tier/Month** | **Overage Cost (USD/1,000 requests)** | **Plan**   |
| ------------------------------ | ------------------- | ------------------------------------- | ---------- |
| **Geocoding API**              | 10,000 requests     | $5.00                                 | Essentials |
| **Geolocation API**            | 10,000 requests     | $5.00                                 | Essentials |
| **Maps JavaScript API**        | 10,000 requests     | $7.00                                 | Essentials |
| **Places API - Autocomplete**  | 10,000 requests     | $2.83                                 | Essentials |
| **Places API - Place Details** | 10,000 requests     | $5.00                                 | Essentials |
| **Places API - Nearby Search** | 5,000 requests      | $32.00                                | Pro        |
| **Street View Static API**     | 10,000 requests     | $7.00                                 | Essentials |

## STEP 3: Enable 5 Google Map APIs

Please follow the below steps :&#x20;

* Go to **API & Services** > **Library** and choose **Maps** category

<figure><img src="/files/6Kc2oOkUzq1bGAkBzAjn" alt=""><figcaption></figcaption></figure>

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

* Search for:&#x20;
  * <mark style="background-color:blue;">**Geocoding API**</mark><mark style="background-color:blue;">,</mark>
  * <mark style="background-color:blue;">**Geolocation API**</mark>
  * <mark style="background-color:blue;">**Maps JavaScript API**</mark>
  * <mark style="background-color:blue;">**Places API (Old version)**</mark>
  * <mark style="background-color:blue;">**Street View Static API**</mark> <br>
* Click to each and **Enable** it.**​​**

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

* **Note: In case, all APIs are enabled but the issue still remains, please try to disable and re-enable all of them.**&#x20;

## **STEP 4: Get API Access and enter it to the App**

* Select the menu button, then navigate to **APIs and services**.
* Select **Credentials**.
* Select **Create Credentials,** then select **API Key.**
* Add this API Key to the app, under **Your Google API Key**
* Select **Save.**

<figure><img src="/files/6UpNWju0e70z1FVOJDeD" alt=""><figcaption></figcaption></figure>

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

* Go to **Settings** -> **General** -> **Google map API key** -> Enter the API Key.

\****Important Note***: API keys are unique identifiers that allow you to connect to a specific service that an application program provides. Because these keys are unique to a specific user, it's important to always keep your API key safe and secure.

In case you want support from Google, you can go to the tab **Support**, read support articles, or create a case to have a conversation with Google.

Or you can go to this tab directly by the link: [**https://console.cloud.google.com/google/maps-apis/support**](https://console.cloud.google.com/google/maps-apis/support)

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

You can follow the instruction in the video below:

{% embed url="<https://youtu.be/O-o8xSacFPY>" %}


# API Key restrictions

So you have generated your key successfully. However, there are still a few other things you need to set up, like security to prevent anyone else misusing your key, as well as setting a budget so that you won't be charged more than you can afford.

Now the API key is generated. To avoid misuse, you need to set in [Google APIs](https://console.developers.google.com/apis/).

Once inside the site → Click **Credentials.**

![](https://sl.storeify.app/images/userguide/gma7.png)

Here you can see the new API key. → Click the pencil icon ![](https://sl.storeify.app/images/userguide/pencil_icon.png) to edit it.&#x20;

![](https://sl.storeify.app/images/userguide/gma8.png)

Now in the API key settings site, there are some adjustments that need to be done.

Firstly, you need to change the key name  - as a general rule, it is named follow the site name or project name

In the **Key restrictions** you can see 2 tabs:

### **Application restrictions**

{% hint style="warning" %} <mark style="color:red;">**Note: If you use this tab, you need adding our app domain:**</mark> [<mark style="color:red;">**https://sl.storeify.app**</mark>](https://sl.storeify.app/*)<mark style="color:red;">**/\*, it is required.**</mark>
{% endhint %}

Select the option **HTTP referrers (web sites)** and enter the website name in the field. Use the format \*.[example.com/](http://example.com/). Any string can replace the asterisk, means that is even for subdomains. Also, you need adding our app domain: <https://sl.storeify.app/*> or \*.storeify.app/\* (the example image below)

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

### **API restrictions**

Choose the services that are enabled for this API key.

→ Click **Save**


# How to Limit Google Maps API Spending

You can absolutely limit your Google Maps API Key spending by setting up budgets and alerts in Google Cloud Console. The goal is to prevent excessive charges if your API gets too many requests.

## **1. Sign in to Google Cloud Console**

* Go to: <https://console.cloud.google.com/>
* Select the **Project** where your API Key is being used.

***

## **2. Set Up Budget & Alerts**

1. Go to **Billing** → **Budgets & alerts**
2. Click **CREATE BUDGET**
3. Select:
   * **Billing account**: Your billing account
   * **Scope**: Choose **Project** or **Service** (you can target only Google Maps APIs)
4. Set **Budget amount** (e.g., $20/month)
5. Add **Alert thresholds**:
   * 50% → Email alert when spending reaches $10
   * 100% → Email alert when spending reaches $20
   * 120% → Email alert when over budget
6. **Save** the budget

> ⚠ **Note:** Budgets only **send alerts**; they do not automatically stop the API when the threshold is reached.

***

## **3. Limit API Request Quotas (to stop overspending)**

To actually **stop charges from exceeding your budget**:

* Go to **Google Cloud Console** → **APIs & Services** → **Enabled APIs & services**
* Select the API you want to limit (e.g., Geocoding API, Places API)
* Go to **Quotas** → adjust **Requests per day** or **Requests per minute**.

Example:

* Geocoding API → Requests per day = 1,000\
  → When the limit is reached, the API will stop responding for that day.

***

## **4. Remove or Restrict the API Key when not in use**

* Go to **APIs & Services → Credentials**
* Select your API Key → **Restrict key** to:
  * Limit it to certain domains or IP addresses
  * Allow only specific APIs

***

## 💡 **Best Practice Combination**:

* **Budget + Alerts** → Know when you’re close to your budget
* **Quota limits** → Ensure requests can’t exceed a safe amount
* **Restrict key** → Prevent unauthorized use of your API Key


# How to get Client ID and Client Secret in Google Cloud Console

To get a **Client ID** and **Client Secret**, you must create **OAuth 2.0 credentials** within a project in the Google Cloud Console. The process involves setting up an OAuth consent screen and then generating the credentials for a specific application type.

**Step-by-Step Guide**

1. **Go to the Google Cloud Console**
   * Navigate to the Google Cloud Console and sign in with your Google account.
   * Select an existing project from the top menu, or create a new one if needed.
2. **Enable the Necessary API**
   * In the left-hand navigation menu, go to **APIs & Services** > **Library**.
   * Search for the API you need (e.g., "Google Sheets API," "Gmail API") and click on it.
   * Click the **Enable** button to activate the API for your project.
3. **Configure the OAuth Consent Screen**
   * In the left menu, go to **APIs & Services** > **OAuth consent screen**.
   * Select the **User type** (usually **External** unless you are a Google Workspace organization user) and click **Create**.
   * Fill in the required "App information," including the **App name**, **User support email**, and **Developer contact information**.
   * Click **Save and Continue** through the "Scopes" and "Summary" sections (you can define scopes later if needed).
4. **Create the OAuth Client ID and Secret**
   * In the left menu, go to **APIs & Services** > **Credentials**.
   * Click the **+ CREATE CREDENTIALS** button at the top and select **OAuth client ID** from the dropdown menu.
   * Select the appropriate **Application type** for your use case: **Web application**.
   * Provide a **Name** for your client ID (this is only for your reference within the console).
   * You need to add **Authorized redirect URIs:** [**https://sl.storeify.app/oauth/callback**](https://sl.storeify.app/oauth/callback) **(**<mark style="color:$danger;">**IMPORTANT**</mark>**)**.
   * Click **Create**.

**Retrieve the Client ID and Client Secret**

A pop-up window will display your generated **Client ID** and **Client Secret**. Copy these values and store the **Client Secret** securely, as it should be treated like a password.

You can revisit and view these credentials anytime from the Credentials page in the Google Cloud Console by clicking on the name of the client you created.

**See the detailed step-by-step screenshots from A to Z to get&#x20;*****Google client ID and secret Key*****:**

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

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

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

<figure><img src="/files/86K1LNSVbQ0bHgKi6eG0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/103H2rJHgCz5x0VkeWqB" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="/files/0adWrl7zJhy0G8t6JcEP" alt=""><figcaption></figcaption></figure>

<mark style="color:$danger;">**Note**</mark>**: The tutorial image above is using the URI of our Quote app; you need to replace this URI with the URI of your Contact Form app:** [**https://sl.storeify.app/oauth/callback**](https://sl.storeify.app/oauth/callback)

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


# How to get Client ID, Tenant ID and Client Secret in Microsoft Azure

To create a client ID, tenant ID, and client secret in Microsoft Azure, you need to register an application in Microsoft Entra ID (formerly Azure Active Directory).

PrerequisitesYou must have an Azure account with permissions to register applications in the Microsoft Entra tenant.

#### **Step 1: Find your Tenant ID**

1. Sign in to the Azure portal.
2. In the search bar, type "Microsoft Entra ID" and select the service from the results.
3. On the **Overview** page, find the **Directory (tenant) ID**.
4. Copy this ID and save it in a secure location.

#### **Step 2: Create an App Registration (Client ID)**

1. In the Microsoft Entra ID menu, select **App registrations** under the "Manage" section.
2. Select **+ New registration**.
3. On the "Register an application" page:
   * Enter a meaningful **Name** for the application (e.g., "MyTestApp").
   * Under **Supported account types**, select an option based on your needs (e.g., "Accounts in this organizational directory only" is recommended for most applications).
   * **Redirect URI:** [**https://sl.storeify.app/oauth/callback**](https://sl.storeify.app/oauth/callback) **(**<mark style="color:$danger;">**IMPORTANT**</mark>**)**.
4. Select **Register**.
5. After the app is created, you will be on its **Overview** page. Find and copy the **Application (client) ID**. This is your **client ID**.
6. Save the client ID in a secure location.
7. Head over to **API Permission** section in your app and add **Microsoft Graph permissions**.

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

8. Select **Delegated Permissions** for `IMAP.AccessAsUserAll`, `SMTP.Send` and `offline_access`, then click "Add permissions"

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

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

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

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

#### **Step 3: Generate the Client Secret**

1. From your app registration's left-hand menu, under "Manage", select **Certificates & secrets**.
2. Under the **Client secrets** section, select **+ New client secret**.
3. A dialog box will appear:
   * Provide a **Description** for the secret.
   * Select a duration for when the secret will **Expire**. Microsoft recommends choosing one year for easier tracking.
4. Select **Add**.
5. **Important**: The **Value** of the client secret is displayed only this one time. Be sure to copy the value immediately and save it in a secure location. You cannot retrieve it later. The **Secret ID** is not the value you need for authentication.

You have now successfully obtained your tenant ID, client ID, and client secret, which are used to authenticate your application with Microsoft Entra ID.