NearPlace

Join 1,400+ marketers, founders, UX designers, and software engineers and receive our next insights:


September 2018
M T W T F S S
« Aug    
 12
3456789
10111213141516
17181920212223
24252627282930

Categories


How To Add Store Locator to WordPress as a Script or Plugin.

NearPlaceNearPlace

Thanks to the WordPress you can manage your stores or Google maps, that’s why below you can check how to install a store locator plugin and manage it properly.


How to add a store locator to the WordPress website – guide for the beginners.


What is WordPress and Store Locator?

If you are a total beginner you might be even wondering, what do we call a WordPress? WordPress is the most popular Content Management System (CMS) which helps you to create your own website even without any coding, so it is the perfect solution for bloggers or little businesses who want to have their own website, but they don’t really want to hire a professional coder who will charge them for a nice amount of money. Of course, big companies also are using the WordPress but they invest a money into it by hiring programmers who will upgrade their website and plugins by additional code.

Wordpress-logo

Many plugins are paid too, so sometimes to have really interesting features you need to pay for it, but of course, it is optional and not required to make your website working. If you still don’t know what plugin is, it is an additional piece of code which extends basic features of the WordPress or adds new functionalities which you can’t find in the CMS. The majority of plugins have its own graphical UI so you don’t have to be scared about the coding.

In this installation tutorial, we will focus on installing a store locator plugin which allows you to manage multiple of stores on the map. Thanks to our plugin you can display your shop listing on every-page so the customer can check whenever he wants. There is also a possibility to use single on-page locator which displays one big map on which you can notice every store you added previously to the plugin and once you click on a single location you will notice a pop-up with its opening hours, photos, available services, etc. If you would like to know more about it, just check our add-ons.

nearplace-store-locator


How to install WordPress store locator plugin?

Once you know how the WordPress and the store locator plugin look. We can start installing the app on our website. It is really simple, but at first – if you don’t want to try something new on your stable website or you don’t have any hosting you can use demo WordPress website.

Once you reach the WordPress dashboard it is a piece of cake to install a store locator plugin through graphical UI. The example will be our own store locator – Nearplace. At first, you need to find “plugins” section where you can manage or download plugins.

wordpress-plugin-settings

Then the only thing which you have to do is to click a “Add new” button.

wordpress-add-new-plugin

Now you can notice there are some popular plugins displayed which you might download, but you may check them later. Now in the search query write “Nearplace” and you should find only one result which is our store locator. You might also notice a big button “install now”, just click it and the process will be started.

nearplace-store-locator-plugin

Every plugin after the installation requires an activation so don’t forget it. You can always active or inactive the app in the plugin management. If you want to set your store locator, in the case of the Nearplace you need to go to the settings which you can find on your own dashboard and then you can notice Nearplace plugin settings.

nearplace-store-locator-settings

As you notice the plugin requires an organization and locator UUID and now you actually need to do something. As many plugins, our Nearplace requires a registration on our website. You can easily do it here, and you will not be disappointed with our really intuitive and easy dashboard which also looks pretty nice. Anyway, before you get to the dashboard you need to fill some empty fields to give us information about you and your website.

nearplace-registration

Once you create a FREE account, you can get your UUID codes, at first you can just use example locations which are already created, and when everything will work perfectly you can import your stores. Now when you see the dashboard, go “Locators” and activate e.g widget and you will notice two buttons, “configuration” and “installation”.

neraplace-widget-installation

You need to choose “installation” button to get your UUIDs. As you can see it is simple, now the only thing you need to do is to paste it to your setting in the WordPress and the plugin will appear on your website.

nearplace-store-locator-uuid


Did my installation of the WordPress store locator end properly?

Of course! We have tried on-page locator and it works perfectly, and there is a screenshot below for a proof!

wordpress-plugin-result

Anyway if you are going to have any problem, just contact with our support, or leave a comment so we will help you for sure!


How to install WordPress store locator plugin with a JavaScript code.

There is also a possibility to install a plugin to the WordPress in the other way – by adding a raw JavaScript code of the app. A developer needs to generate the specific code for you but not all of the plugins provide it. With the Nearplace plugin, everything is automatic so you don’t really have to contact with the support. If you go back to the step where we were finding a UUID for our organization, on the same page you can notice a big button “I’ll install it myself”. Once you click the button, there will be displayed a special js code which you can paste into your template.

nearplace-copy-store-locator-code

Once you have a code now you need to paste it and it is a little harder part than installing a plugin automatically. Now you need to find “Appearance” and then “Editor” on the WordPress dashboard. You will notice a lot of code, but don’t be scared. On the right side, you have a list of all theme files. You need to choose “Theme header” to install Nearplace through JavaScript code.

theme-header-plugin-code

Then another piece of a code will be displayed. Now you need to find <body> section of the code and now it depends. If you see the end of body (</body>) you should paste it before it. But as an example, in my case I don’t have </body> in the code.

nearplace-code-paste

My body code ends with <div id =”content”> and also a developer of theme mentioned that theme displays all before this <div>. Remember to read developer’s comments because they may be really useful. That’s all, I pasted the code and now the only thing left is to check if the Nearplace plugin works.

nearplace-successfull-installation

As you can see, everything from our SaaS works perfectly on the website :).


Final thoughts

The WordPress CMS is a really simple in usage, so after a short matter of time, you should understand how to install store locator on your WordPress website through graphical UI or JavaScript code. Especially with our tutorial, it will be a blink of an eye. Also, you’ve learnt about the most interesting store locator – Nearplace, which will be really useful if you have multiple locations or stores to manage. Remember to leave us some feedback so we can improve our app and articles!