Shopify C: Store Locator App User Guide

• App Version: 1.0.0
• Our Support Email: shopify@capacitywebsolutions.com

Thank you for purchasing C: Store Locator Shopify App. If you have any difficulty with this App or you find an issue, please feel free to send us a message: shopify@capacitywebsolutions.com

Below you will find the detailed documentation on how to use our App and we wish you have a great experience with our Shopify App.

Buy App

1. Click here to visit our Shopify App >> C: Store Locator

2. Click on Add app button.

Pricing Details: (Click Here)

Show Store locations on Frontend

1. Store Locator Page
   


2. Search Store by Location
   


3. Search Store by Distance
   

Create Navigation Menu

1. Go to Admin >> Online Store >> Navigation


2. Step-1: Create menu from clicking Main menu link.


3. Step-2: You can Create Menu Item for “Store Locator” Page like below screenshot:


4. Click on “Add menu item” then Enter Name as “Store Locator” and Link as >> https://your-store-domain.myshopify.com/apps/cws-store-locator

Display Store Map Shortcode

1. Go to Admin >> Apps >> C: Store Locator >> How to Use


2. You can display Store Locations Google Map in any pages by use of below shortcode.

Copy to Clipboard
{% comment %} Start of StoreLocator App - DO NOT EDIT THIS CODE {% endcomment %} <div class="page-width container wrapper storelocator-container"> <div class="storelocator-content"> <div class="mb-store-map-contents"></div> </div> </div> {% comment %} End of StoreLocator App - DO NOT EDIT THIS CODE {% endcomment %}

If you want to show all store locations to users on any other page except store locator page then you can use this feature. This feature are display all the stores location in single google map.

App Configuration Steps:

Show "Store Locations" on Store Locator page:

Watch Video Guide (click here)

1. Step-1: Please open live theme customizer >> theme settings section then after please follow below screenshot and save your changes at last by click on "save" button at top right corner!
   


2. Step-2: Then go to /apps/cws-store-locator page of your theme from theme customizer section then you will see below screen:
   

Create Google API Key

Even the API key is compulsory for the app it will help to show stores physical location, 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:

1. 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 and sign in to your account. Then, you click on the menu button and select Billing.

   
   
   

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

   
   
   
   
   

   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.

   
   
   

   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.

   
   
   

   Then, you click on the View All button and choose these 5 above APIs.

   
   
   

   If you have already enabled these APIs, the platform will show the Manage button.

   
   
   

   Otherwise, it will show the Enable button for you. Click on that button to enable them for your project.

   
   
   
   

   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.

   
   
   

   On the Credentials page, you click CREATE CREDENTIALS and choose API key.

   
   
   

   Google platform will automatically create an API for you but you need to restrict this API.

   
   

   Step 5: Restrict the API key

   To restrict the API you need to click on the Edit icon, the platform will provide a new page to you to the Restrict and rename API key.

   
   
   

   On this page, you can rename the API as well as restrict it. In case you have many APIs, you can rename it as "C: Store Locator", which makes it easier to keep track. In the 'Application restrictions' part select None.

   
   
   

   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.

   
   
   
   

   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 General Settings section and enter your API key into the Google Map API Key field in the General Settings tab:

   
   
   

   Don't forget to click on the Save button after you add the Google Map API Key to the app.

Add Store

1. Go to Admin >> Apps >> C: Store Locator >> Manage Stores >> Create Store
2. From Here, You can Create Store easily by store general information, store working time and store localization while adding new store.
3. 
   
   


4. - You can set basic store information from General Information section. You can delete Store Image from Delete icon click. ***Store Name, Country are Mandatory Field.
5. - You can set store opening time and closing time from Working Time section.
6. - You can set store location from Store localization section. You can set store coordinates by marker dragging or by clicking in Map and also you can enter coordinates manually in latitude and longitude fields.

Manage Stores

1. Go to Admin >> Apps >> C: Store Locator >> Manage Stores


2. 


3. From Here, You can Manage Store Locator data by Edit / Delete / Search operations.
4. - You can delete selected stores by clicking Delete Selected button.
5. - You can Enable/Disable store from Status column.
6. - You can Search stores based on Store Name, Address, City, State, Country, Priority and Status.

General Settings

1. Go to Admin >> Apps >> C: Store Locator >> General Settings
2. From Here, You can set Store Locator App configuration.


3. 


4. Enable App: You can enable/disable App by choosing Yes/No.
5. Display Search Section: You can enable/disable Search Section in the frontend by choosing Yes/No.
6. Display Store Details Section: You can enable/disable Store Details Section in the frontend by choosing Yes/No.
7. Display Predictive Search: You can enable/disable Predictive Search in the frontend by choosing Yes/No. If you are displaying a predictive search field in the store list section, only the records that have been loaded will appear in the search results.
8. Display Map: You can enable/disable Store Map Section in the frontend by choosing Yes/No.
9. Google Map API Key: You must have to enter Google Map API Key for display google map in frontend and also for backend map.
10. Map Height: You can set Google Map height in the frontend (Note: Set google map height in digit like 300. it will consider 300px).
11. Map Width: You can set Google Map width in the frontend (Note: Set google map width in digit like 100. it will consider 100px).
12. Zoom Level: You can set Zoom Level for google map in frontend (Note: Set zoom level in digit like 5).
13. Map Marker: You can change Map Marker using this configuration. You can set default map marker using Set Default Marker button.
14. Store Not Found Message: You can set "Store Not Found" message. it will shows in the store locator page when store is not available.
15. Distance Measurement Unit: You can set distance measurement unit (Kilometers/Miles) for search store by distance.
16. Minimum Distance Slider Range: You can set slider minimum distance range in Search by Distance tab.
17. Maximum Distance Slider Range: You can set slider maximum distance range in Search by Distance tab.
18. Set Default Country: You can set default country (primary country). Only this selected country will show in the frontend select country dropdown box. If you not want to show all countries in the frontend country search filter then you can set default country.


19. 


20. - You can change any text label which is displayed on the frontend. You also can translate them into other languages you want using Text Label Translation configurations.


21. 


22. - You can set search option placeholder text.


23. 


24. - You can Show/Hide Store Information which you want in the store locator page using Show / Hide Store Information configurations.


25. 


26. - You can change store locator page design like Button Text Color, Button Text Color(On Focus), Button Background Color, Link Color, Store Name Font Color, Store Info Font Color, etc. using Store Locator Design configuration.

Import/Export

1. Go to Admin >> Apps >> C: Store Locator >> Import/Export


2. 
   



3. Import Stores:



4. Choose CSV File: Select CSV file for import records (Note: Max. File Size allowed is: 10MB).
5. Import ROWS By: You can select options like, Bulk Insert, Append Rows and Update Rows. Bulk Insert option will Clear Old Stores Rows & Adding Whole New Stores Data. Append Rows option will Append (Add) Rows to existing Stores Rows, it doesn't Delete old Stores data. Update Rows option will allow you to update existing records.



6. Export Stores:



7. CSV Template: You can select options like, Bulk Insert/Append Rows and Update Rows. Bulk Insert/Append Rows option will use to export records in CSV and you will import exported records. Update Rows option use to export records in CSV and you can modify CSV file then select upadted CSV file for import records and choose Import ROWS By option like Update Rows then you will update existing records.

Customer Support

If you have any questions, please do not hesitate to contact us at shopify@capacitywebsolutions.com. We are happy to help!

Please add our email: shopify@capacitywebsolutions.com to your address book to ensure our response email isn’t marked as spam mail.

We will try our best to reply your emails as soon as possible , except weekends and National Holidays.

Thank you.
Capacity Web Solutions Team

Credits

• PHP
• Mysqli
• Angular JS
• jQuery Library
• Shopify API
• Shopify Theme Liquid