# Instruction

### **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)

&#x20;       ➥ Get your own API Key with our following video guide: <https://www.youtube.com/watch?v=XXF1SiNJaKg>

&#x20;       ➥ 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).&#x20;

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.&#x20;

#### **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.&#x20;
{% 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).&#x20;

![](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" %}
&#x20;For any difficulties, please contact us via email: ***<support@secomapp.com>***
{% endhint %}