Store Locator

Overview

Developed by Mageplaza experts, Store Locator is one of the best extensions that allows customers to purchase the desired products in the nearest store with ease. Integrated with Google Maps and GPS, everything becomes easier for customers in finding the nearest shop location. Moreover, it comes with many powerful functions, we sure that you will be satisfied with the benefits that this module brings. Let’s experience it right now!

How to use

  • Customers can see a list of all the addresses of the store branches

https://i.imgur.com/KGGZqnt.pngstore locatorr

  • Customers can quickly search any store in a certain area. For example, when a customer searches in Washington, all stores in the selected radius in Washington will be displayed.

https://i.imgur.com/RyJtVWd.pngstore locator i

  • Customers can zoom in, zoom out Map as well as can change the store search radius

https://i.imgur.com/X9KNDqr.gifstore locator ii

  • By clicking on the detail, customers will see detailed information about the Store and can use the directions to the selected store

https://i.imgur.com/Tu8jvUL.pngstore locator iii

How to configure

  • There’re 2 ways to access the menu of the extension:

      1. Content > Store Locator

    https://i.imgur.com/mSGJanL.pngconfiguration

      1. Enable Mageplaza Menu, all extensions of Mageplaza you are installing will be displayed in this menu:

    https://i.imgur.com/oAw0jjx.pngconfiguration2

1. Configuration

1.1. General

https://i.imgur.com/l5431CP.pngstore locator 2

  • Enable: Choose Yes to enable this module
  • Title:
    • Enter the title for the page
    • Title plays a role as label of the link that accesses the page
    • If you leave this field blank, the default is Find a store
  • Description: Enter the desciption for the page
  • Default website: Enter the default website for the store. With stores that have multiple branches, admins can quickly synchronize the website with this item
  • Head Background Image: Upload the background for the head block
  • Head Icon: upload icon for the head block
  • URL Key:
    • Enter the link to access the page
    • If leaving this field blank, the default is find-a-store
  • Display Link On: Select where the link can be displayed on the frontend
  • Enable Get Direction: Select Yes to enable the directions to the store when customers want
1.1.1. Filter store

https://i.imgur.com/E4behlO.pngstore locator 2

  • Enable: Select Yes to enable the search feature.
  • Auto-Filter by current position: Select Yes so that customers can move the maps back to their position by one click in the search box:

https://i.imgur.com/SW1ltyZ.pngstore locator iiiii

1.2. Map Settings

https://i.imgur.com/YeGQ2hA.pngstore locator 3

  • Google Map API Key: In order for Google Map to obtain the coordinates of the locations that admins have added, admins need to enter the Google Map API Key into this section.
  • Map Style:
    • We provide 4 most popular Style Maps for admins to choose
    • Admins can only select one style at the same time
    • Admins can also custom the maps as they want by themselves. Admins can add Map Style as the guide in the last section of this page.
  • Zoom Default:
    • Set map zoom factor (count by %)
    • We recommend a zoom factor as 12%
  • Filter Radius:
    • Install the search radius store from the customer location that they can use
    • Radiuses are separated by commas
    • For example: 10,20,50,100
  • Default Radius:
    • Set default search radius store from customer location. When the client accesses the page, the map will filter the stores near them in this radius
    • This number may be different from the number entered in Filter Radius field
    • If you leave this field blank, the default radius is 6731 miles (the same as the radius of the earth)
  • Distance Unit: Admins can choose the unit distance as Mile or Kilometer depending on the local
  • Marker Icon:
    • Select the icon representing the location of the store on the map
    • As it doesn’t resize itself, admins need to put the icon with the size as 20x20 px before uploading

1.3. Store Time Default

https://i.imgur.com/U0im4oH.pngstore locator 4

  • Admins can set the timezone and opening time for each item of the week for all stores. These values are only default values. They are only applied when admins click the Use Config button when they Add New Location

1.4. SEO

https://i.imgur.com/lTOyuXQ.pngstore locator 5

You can configure the meta that is useful for your better SEO

  • Meta Title: Set Meta title for posts list page (Blog Page)
  • Meta Description: Set Meta description for posts list page
  • Meta Keyword: Set Meta keywords for posts list page
  • Enable Local SEO:

2. Locations

2.1. Grid

https://i.imgur.com/TPZ895i.pngstore locator 6

  • This is a place to store all store locations that are created
  • From the Grid, admins can capture the basics of Store Location such as ID, Name, Visibility, Store View, City, Zip Code, Country, Sort Order, Create Date and Action that can be done with Store Location.
  • In the Actions dialog, admins can execute the following actions:
    • Delete: Admins need to tick Store Location to delete, then select Delete in the Actions (upper left of the Grid) to delete. A confirmation dialog will appear, select OK to continue deleting
    • Change Visibility: Admins need to tick Store Location to change the status, then select Change Visibility > Yes/No in the Actions dialog (top left of the Grid) to change. A confirmation dialog will appear, select OK to confirm the change
  • In the Action column, admins can click on Edit to modify the Store Location
  • In addition, admins can Filter, Change Store View, hide/show Columns, Export Grid or edit inline

https://i.imgur.com/pSdlUZY.pngstore locator 7

2.2. Add New/Edit Store Locator Order form

2.2.1. General

https://i.imgur.com/yHes7Ol.pngstore locator 8

  • Name: The name entered here is displayed in both the backend and the frontend
  • Visibility: Select Yes so that store locator is displayed on the frontend
  • Description: Record a short description for the store
  • URL Key:
    • Enter the link to access the location
    • If left blank, after you Save, based on the Name field, URL key will automatically create (unless Name is a hieroglyphic as Russian, Japanese, Korean, Chinese, etc)
  • Store View: Store Location is only available in the selected Store View
  • Sort Order:
    • Stipulate the display order of the Store Location on the Frontend
    • 0 is the highest position
2.2.2. Location
2.2.2.1. Address Information

https://i.imgur.com/fuKi3Ix.pngstore locator 9

  • Fill in the store location’s address information in these fields
  • After entering the correct address, admins click on Get GPS coordinates to automatically get coordinates and display on Maps
2.2.2.2. Review Map

https://i.imgur.com/22qt7Q1.pngstore locator 10

  • The coordinates of the store location are shown here
  • They can be obtained automatically when admins Get GPS coordinates, admins can also manually fill
  • The coordinates change with the marker icon when it moves to another location, however the information on the address above (street, city, etc.) will not change.
2.2.3. Time
2.2.3.1. Open Hours

https://i.imgur.com/gZBuyd0.pngstore locator 11

2.2.3.2. Holiday

https://i.imgur.com/BYOdkdd.pngstore locator 12

  • Holidays created under Content > Store Locator > Holidays will be displayed in this section
  • The selected holidays will be applied for the store. Opening times on the Frontend will change from Open to Close on holidays
2.2.4. Contact

https://i.imgur.com/bhsNsSt.pngstore locator 13

  • Admins can enter their contact information to display on the frontend
  • Basic information includes: phone number, website address, fax number and email address
2.2.5. Images

https://i.imgur.com/QXDBgfn.pngstore locators 14

  • Admins can upload typical images of the store to display on the Frontend.
  • The uploaded first image is displayed on the store locator page, the remaining images is displayed as a slider when the customer clicks on the location detail.

3. Holidays

3.1. Grid

https://i.imgur.com/CI4jaOd.pngholidays

  • This is a place to store all the Holidays that admins installed for store
  • From the Grid, admins can capture basic Holiday information such as: ID, Name, Status, No. of Locations, Create Date and Action that can be done with Holiday
  • In the Action dialog, admins can execute the following actions:
    • Delete: Admin need tick tick Holiday to delete, then select delete in the Actions (upper left of the Grid) to delete. A confirmation dialog will appear, select OK to continue deleting
    • Change Status: Admins need tick tick Holiday that they want to change status, then, choose Change Status > Yes/No in the Action dialog (top left of the Grid) to change. A confirmation dialog will appear, select OK to confirm the change
  • In the Action column, Admin can click Edit to modify Holiday information
  • In addition, admins can Filter, Change Store View, hide/show Columns, Export Grid or edit inline

https://i.imgur.com/QDhVqAq.pnggrid

3.2. Add New/Edit Form

3.2.1. General

https://i.imgur.com/BLXAwCD.pngImgur

3.2.2. Locations

https://i.imgur.com/9EJOjjP.pngImgur

  • The created locations in the Content > Store Locator > Locations section will be displayed in this section
  • Selected stores will be applied for this holiday. Opening times on the Frontend will change from Open to Close on holidays.

How to add Map Style

  • Step 1: Choose Map Style = Custom

https://i.imgur.com/qcYHaJD.pngstore switcher i

  • Step 2: Click here in the comment. The link will be lead to https://snazzymaps.com/

https://i.imgur.com/qBwCXvK.pngstore switcher ii

  • Step 3: Click on Map Style that you want. For example: Lost in the desert

https://i.imgur.com/UbXsqgD.pngstore switcher ii

  • Step 4: Expand Code and Copy JAVASCRIPT STYLE ARRAY into the Custom checkbox in the configuration

https://i.imgur.com/Dbl5elA.pngstore switcher iii

  • Step 5: Save and check on the frontend

https://i.imgur.com/ST2Xc41.pngstore switcher iiii