# Instruction Store Locator app is super easy to use. Let's get start from the very first steps! ### **Step 1: Add Store Location** Go to **Stores** sections ➜ Get started by clicking **Add Store** ### **Step 2: Enter Detail Store Information** * Go through General and Location Info Part to enter detailed store information like Store Name, Store Address, Description of the store, and other necessary information. * After entering the exact address of the store, you can correct the location on the map in the last part by drag and drop the red pin. * After everything is done, remember to click Save and Publish to Shop! ### **Step 3: Configure Store Locator app** Go to the Settings section. You will see there are 5 tabs that we need to go through: #### 1. General Tab: ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2FXcPbYij9vwUAFZyGHYPB%2FScreenshot1.png?alt=media\&token=99d29c49-a9c5-4d77-ab0b-3b7404f487b6) * Firstly, **enable Store Locator.** * After that, please update the **API Key** to keep the app working properly for your site. (We recommend you to create your own API) ➥ Get your own API Key with our following video guide: ➥ Paste the API you just created in the API Key box ⇒ Click **Save**. * You can set the Zoom Level of google map. The default value is 12. #### **2. Search Tab:** ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2FkN0F2ONZtJbjojw3GYZf%2FScreenshot2.png?alt=media\&token=63836c81-39a6-4797-b0fd-9e1683a09262) * Enable **Auto detect Location** to detect the location of customers automatically when visiting the site. * To configure the search feature on the frontend, you can go through the fields: Max Results, Search Radius, Default Search Radius, Default Search Measurement. * To select what filter tags will be shown in the Search section, you can go through the fields: Display All Tags, Select Display Tags. * Other fields allow you to change the style of the search section on the frontend. #### **3. List & Map Tab:** ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2Fx0lh0e38oo1C6Db5VJQu%2FScreenshot3.png?alt=media\&token=4ff8c2f0-200e-4f3e-be09-cfa6d4dd49d3) The Store List section will display the search result and the Map section will show the location of stores on google map (with a popup to show the detail of the store). In these sections, you can configure what information of the store will be shown on the store list and store popup. You also can change the style of these sections. #### **4. Translation Tab:** ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2FnXRn9KvLNWEcE9H9jhId%2FScreenshot4.png?alt=media\&token=a3496156-75fc-4f18-9dc2-3c25bd26d3a2) * This section allows you to change any text label which is displayed on the frontend. You also can translate them into other languages you want. {% hint style="warning" %} Remember to click **Save** and **Publish to Shop** after you have finished all the settings/ changes. {% endhint %} #### **5. Advanced Customization:** ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2FpmKB94BZbVHpZSJkDSMz%2FScreenshot5.png?alt=media\&token=2a2bfb5a-d360-4a54-9052-20ea6f0eaddd) This section is for developers. Let your developers know which way to edit files to customize our Store Locator app. ### **Step 4: Display Store Locator on your website** Now, let us instruct you on how to show Store Locator on your website’s main menu: 1\. Go to **Online Store** ➜ **Navigation** ➜ Click **Main Menu** ![](https://lh6.googleusercontent.com/sHZ7uhkCQCQ0Qffy_3pRB9KlbCWT-fSu6ObQ4j4yLSNEcrKvgWrag6QgfGrlkBuyz7TrFvvKfpyLlhpa8_x6jOaJQu1aQt35N3NS6PXeDWROlu2HeejHEH7hqtBqiZzzePttmSCi) 2\. At the Main Menu ➜ Click **Add menu item**, then enter Name and your Store Locator URL Link (Using the URL that is shown on the top of your backend). ![](https://lh5.googleusercontent.com/0rK5Ougfj5085yHj3tNrih8-Nb-5IQL9c56vczSlalRK1e2AffB2eAv7c1APNLHhi1Nz9dGnIJ2IsU03nHejyIjhvB6JfRHZo5AmlBBrBxKGH1iIC3xgudULNmdzH8PSmEQL--Lx) ![](https://lh5.googleusercontent.com/A4pu5sgVdqL66uKiwfw9Wxr02imlJB-jPl1BrHWewJJ0AtqF_nBEoYbZlQ4re8-NR4Sq0HtddiNIvzDif6G-e0y972Xm7B3vftEBHAJkgZhpFVD28_7ENuoGjZWN4e9igGkZxXi0) ➜ Click **Add** and **Save Menu**. Then go to the frontend you will see the tab to Store Locations on the Main Menu. ![](https://lh4.googleusercontent.com/qqT69r-1JJZcFuDh_aDQ0oyhQ7Fs94y2vcp3igYnEMOGEnLRv0EFLgoG76nMFEaIiUiY84odkr0KX6I0Kth-DHPYBN1rUz7QyGXFwmju6nuZn4cT2mVaZzHMQfopDNnRb5trpzCM) {% hint style="info" %} For any difficulties, please contact us via email: ****** {% endhint %} # Create Google API Key Even the API key is not compulsory for the app but it will help the app run smoothly, therefore we still recommend you to create an API key on your own for your business. There are 6 main steps to create an API key: ## **Step 1: Create a billing account** The first step that you need to take is creating a billing account. If you already owned a billing account, you can skip this step. First, you go to the [Google Cloud Platform Console](https://console.cloud.google.com/home/) and sign in to your account. Then, you click on the menu button and select **Billing**. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLC6Rsq_8otm48h6AWy%2Fimage.png?alt=media\&token=5d8c24cf-45a4-4e2e-be19-98249a492611) After that, you will see the **Add billing account** button on the **My billing accounts** tab. Click on that button and fill in all the required information including Name, Address, Card number,... ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLC6mRtMH5bDRR8FW-4%2Fimage%20\(1\).png?alt=media\&token=3ce8cdd0-96e7-4c60-9afe-20005742c8df) ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCAqPtVqgwGSXRezTu%2Fimage%20\(2\).png?alt=media\&token=c2d5c2ba-76e9-443f-8757-0cd7029290b2) ## **Step 2: Enable billing for your project** To let the API work, the Google platform asks you to enable billing for your project. One more time, click on the menu button and choose the **Billing** section. Then, you just need to link the project with your billing accounts. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCBRWCiJVHSTd_XU5A%2Fimage%20\(4\).png?alt=media\&token=2ade9077-c2f7-41d2-b4c0-6ed51a743fe8) ## **Step 3: Enable 5 types of API** As our apps use 5 types of API, which are **Direction**, **Geocoding**, **Geolocation**, **Maps JavaScript,** and **Place APIs**, you need to check whether you enable these APIs or not. Click on the menu button again and select **APIs & Services** and click on **Library**. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCBbxQJBY2mu8i-oNi%2Fimage%20\(6\).png?alt=media\&token=11f57a66-1860-450b-ac79-ea2e3c2e3847) Then, you click on the **View All** button and choose these 5 above APIs. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCBkdU5Y9zsKdMKwlD%2Fimage%20\(7\).png?alt=media\&token=5cb841fd-7a45-48b1-a08c-3423c28a53dc) If you have already enabled these APIs, the platform will show the **Manage** button. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCBrpCZRNYyOByABq0%2Fimage%20\(8\).png?alt=media\&token=8f250a17-8e5d-4fa8-92cc-66901f5c8c3e) Otherwise, it will show the **Enable** button for you. Click on that button to enable them for your project. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCC4Y7_X2MrKs5Dmbt%2Fimage%20\(9\).png?alt=media\&token=2cbe309f-b8bb-486b-8958-ce86156a789b) ## **Step 4: Create an API** The next step that needs to be done is creating an API key. To create an API key, you also click on the menu button and select **APIs & Services** > **Credentials**. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCCBU1TMNc_cW4mgCH%2Fimage%20\(10\).png?alt=media\&token=82d46d41-9951-4f7d-828f-c23f17920bf1) On the **Credentials** page, you click **Create** credentials and choose API key. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCCHgHrcyt171HsjYp%2Fimage%20\(11\).png?alt=media\&token=4a16d90f-5836-48e6-a850-9003cf91908c) Google platform will automatically create for you an API but you need to restrict this API. ## **Step 5: Restrict the API key** To restrict the API you click on the **Edit** icon, the platform will bring you to the **Restrict and rename API key page.** ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCEE31YABrIKY5oufO%2Fimage%20\(12\).png?alt=media\&token=028cd9bb-fabf-4d10-b82e-6f03c803c324) On this page, you can rename the API as well as restrict it. In case you have many APIs, you can rename it as "Store Locator", which makes it easier to keep track. In the 'Application restrictions' part select **None**. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCEHB6bxXHQOPHAaV3%2Fimage%20\(13\).png?alt=media\&token=91c0c6d2-bfc4-4ce2-b462-92c4bf49411c) For the **API restrictions,** you select the "Restrict key" option and click on all 5 types of APIs, including **Direction API, Geocoding API, Geolocation API, Maps Javascript API,** and **Places API.** ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJf6_WLqHK7yqgwnUiD%2F-MLC3C_nqP40WtvmLsPG%2F-MLCFNUcK9KWFPrByKxZ%2Fimage%20\(15\).png?alt=media\&token=0b7fc8fb-0042-4899-970b-33608523deb5) ## **Step 6: Apply the API key** The final step is applying the API key to the app. To do that, you open the app from your Shopify admin, then go to the **Settings** section and enter your API key into the **API Key** field in the **General** tab: ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2F3jmzsnFgDXNgE0eTPNf7%2FScreenshot6.png?alt=media\&token=346801d2-bdcb-4dff-ab6f-e5f19ab92a9c) Don't forget to click on the **Save** and **Publish to Shop** buttons after you add the API Key to the app. # Budget Settings Set your budget so that Google does not deduct more than you want and that you are able to use the $200 that is provided by Google for free. ➜ Go to [Google Cloud Platform](https://console.cloud.google.com/home/dashboard) ➜ Open Menu ➜ Click the **Billing** tab. ![Screenshot\_1.png](https://secomapp.zendesk.com/hc/article_attachments/360033261051/Screenshot_1.png) ➜ Next, click the **Budgets & alerts** tab in the left menu. ![Screenshot\_2.png](https://secomapp.zendesk.com/hc/article_attachments/360033261071/Screenshot_2.png) ➜ Click the **Create budget** button to get started creating a budget. ![Screenshot\_3.png](https://secomapp.zendesk.com/hc/article_attachments/360033270012/Screenshot_3.png) A new setting window shows up. ➜ Enter the **Budget name** and **Budget amount .** ➜ For example $200 and remember to tick **Include credit as a budget expense** option. If you forget to tick this option, you cannot use your free credit. ➜ Finally, click **“Save”** to save all settings. ![Screenshot\_4.png](https://secomapp.zendesk.com/hc/article_attachments/360033270032/Screenshot_4.png) # Import Store Locations Besides the manual way, you are also able to upload unlimited store locations from CSV file in a few clicks. **Step 1:** Go to the **Import** tab and **Add CSV File**. A few seconds process and a table with your stores’ information shows up. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2FNLY8rJj9KeLaZX0Z2k4T%2FScreenshot7.png?alt=media\&token=ec0ba7ff-b5b3-402e-9661-8ec884e3c97e) {% hint style="warning" %} Only the files in **CSV** format can be processed. You can have a look at our CSV file sample: {% endhint %} {% hint style="info" %} * Data fields can contain Store name, Store Address, City, Priority, Province/State, Country, Zip Code, Phone, Fax, Email, Website, Hours, Store Description, Latitude, Longitude, Tags, Store image URL, Marker Image URL. ➜ The explanation of data fields can be found [here](https://app.gitbook.com/@luna-secomapp/s/store-locator-by-secomapp/~/drafts/-MLl7wbanBEtfEygpeOA/import-store-locations/import-data-detail/@drafts). * Don’t worry about field orders. You can map your field headers after browsing the file. {% endhint %} ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2FnNM5uvSpUE0Xp83m58GK%2FScreenshot8.png?alt=media\&token=6486eeb0-e2df-448a-89ca-d0113148b67f) **Step 2:** Select the name for each column. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2FIUrjLtmc1bovxX3sAFgg%2FScreenshot9.png?alt=media\&token=1cd1966a-e1e5-4e1f-93b4-cd781d62bef6) {% hint style="warning" %} * Remember that Store Name, Store Address, City, Zip code/ Postal code, Country are required. * If the first row of your CSV file is your column header, please select "Yes" in "Don't import First Row". {% endhint %} **Step 3:** Click the **Import** button. ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2FHQZbqgMpxPJwZ2EN19AW%2FScreenshot10.png?alt=media\&token=ed161580-56a5-4c24-b1b2-affa06f1e697) ![](https://1679181860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJf6_WLqHK7yqgwnUiD%2Fuploads%2FECnQaMaeCtQBg06EB4Jm%2FScreenshot11.png?alt=media\&token=dd9d0848-539a-44b3-85d0-725d3d84ba56) After you finish the upload process, your store lists will be transferred to the **Location** tab, where you can customize each store the way you want. # Import Data Detail Here are the explanation of the data fields in the CSV file. | CSV Header Name | Optional/Require | Description | | ---------------- | ---------------- | ------------------------------------------------------------------------------------------------ | | Store Name\* | Required value | This is field contains the name of your store. | | Address\* | Required value | Address of your store. | | Country | Optional | Country of your store. | | State | Optional | State of your store. | | City | Optional | City of your store. | | Zipcode | Optional | Zipcode of your store. | | Phone Number | Optional | Phone number of your store. | | Fax | Optional | Fax of your store. | | Description | Optional | Description about your store. | | Email | Optional | Email of your store. | | Web | Optional | The website url of your store. | | Tags | Optional | All tags relate to store, each tag will be seperate by comma . Example: clothers, T-shirt, wifi. | | Schedule | Optional | Detail scehdule of your store. | | Store Image Url | Optional | Image URL of your store. This image will be displayed on google. | | Marker Image Url | Optional | Image U of marker which you'll be replace for google maps's default marker. | | Latitude | Optional | Latitude of your store. | | Longitude | Optional | Longitude of your store. |