Shopify C: Store Locator App User Guide


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.

How to Use it


This App is a handy tool to search physical stores on your website.

You can configure the whole store locator frontend page from App admin.

Search By Location and Search by Distance filters are available.

Text translation configuration available.

You can Show/Hide physical Store information.

Dynamic design options available.

Bulk Import/Export Stores feature available.

You can set Store Location manually or by Google Map.

You can manage all stores from the backend like insert store, update store, delete single store, delete multiple stores, etc.

Advance search store filter available in App admin.

You can display all Store Locations in Google Map on any page using a single-line Shortcode.

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

  5. Current Active Theme

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.




  3. 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)

NOTE: You must need to publish theme then app embed feature will work.

  1. Step-1: Go to General Settings Tab and set Enable App as Yes then click on "Save" button.
    Enable App

  2. Step-2: 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!
    Enable App Embed

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

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.


    Create Billing Account

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


    Add Billing Account

    Billing Customer Information

    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.


    Enable Billing

    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.


    Add Library

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


    Select APIs

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


    Manage API

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


    Enable JavaScript API

    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.


    Create API

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


    Create Credentials

    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.


    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.


    Restrict and rename API key

    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.


    API Restrictions

    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:


    API Restrictions

    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 >> Add Store
  2. From Here, You can ADD STORE easily by store general information, store working time and store localization while adding new store.

  3. Add Store

  4. - You can set basic store information from General Information section. You can delete Store Image from Delete icon click. ***Store Name, Address, Country, State, City, Latitude, Longitude 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 field.

Manage Stores


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

  2. Manage Store

  3. From Here, You can Manage Store Locator data by Edit / Delete / Search operations.
  4. - You can delete single record or delete selected records or delete all records by clicking Delete or Delete Selected or Delete All button.
  5. - You can set store Priority from Priority column in the store list table.
  6. - You can Enable/Disable store from Status (Enable/Disable) column.
  7. - You can set page size from Page Size select box.

  8. Manage Store

  9. - You can Search stores based on Store Name, Address, City, State, Country, Priority and Status.
  10. - Select field from Field select box and select condition like Equal, Contain, Not Contain from select box and enter vaule which you want to search in Value text box then click on Search button.
  11. - You can reset seach text from clicking Reset button.

General Settings


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

  3. General Options

  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 Map: You can enable/disable Store Map Section in the frontend by choosing Yes/No.
  8. Google Map API Key: You must have to enter Google Map API Key for display google map in frontend and also for backend map.
  9. Map Theme: You can set Map Theme like Standard, Silver, Retro, Dark, Night, Aubergine, etc.in frontend.
  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. Choose 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. Text Label Translate

  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. Search Options Placeholder Settings

  22. - You can set search option placeholder text.

  23. Show/Hide Store Information Settings

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

  25. Store Locator Page Design Settings

  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. Import Export Stores

  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


Buy Now
faq
Support