How To Add Store Locator or Google Maps App To Shopify

Shopify is a Canadian company which has created a special e-commerce platform for online stores and retail point-of-sale systems. The platform has around 600 000 merchants already and the number is growing every year. So if you want to manage your online store applications like a store locator it might be really handful when you want to promote your store by showing a customer what services do you offer. Thanks to it e.g. you can navigate him to the nearest shop. If you want to check the most popular store finder apps for Shopify you should read our great article about the best free and paid Shopify store locators.


One of the best store locator apps is a Nearplace which offers you a pretty intuitiveness and pretty good interface which allow you to add whatever you want like services and place types of your store on the special generated map.

 Adding Shopify store locator App

Adding a code of the store locator to the Shopify website is not the easiest one. There is a lot of different sections with codes…and you need to know in which one should you paste your code. We will try to describe you in a few points below to make it as easy as we can:

Where to find a theme?

On the dashboard, you can notice something like “Online Store” click on it and there will be displayed a list with themes, blog posts, pages, etc. You need to choose “themes” option


 How to edit a Shopify theme code?

Now if you want to customize your theme’s code you can see two available buttons “actions” and “customize”, we are interested in “actions” one, so once you click it there will be displayed a list of functionalities. If you want to add a store locator through a script you need to choose “edit code” feature.


Structure of the Shopify theme

Now, the most interesting part. Once you click the “edit code” option you will be redirected to the page with a huge amount of layouts, templates, sections and many more with a lot of code.


We are interested in “sections” part where you can find “header.liquid” code which is the most important piece of code for us.


Modifying a code.

As you can notice, for non-coders this code looks really scary.


Don’t worry, implementing Nearplace store locator script is a piece of cake. Even if there is no <body>(at least for our template) section, we advise you to paste your code just before the end of the code and it will work for sure!


We also tried to implement the script into a random place in the code and it still worked but it is better to know where your code is. If you still don’t know how to generate a script from our interface we advise you to read a guide how to add a store locator to the WordPress website as a script or plugin, where you can find information about it.


Result check

Once you’ve implemented your JavaScript code from our SaaS the hard part has ended. The only thing left is checking if the app which we implemented works or not. To check it, go back to themes and now click the second button, “customize”.


Once you are redirected to the website customization in the bottom left corner you should notice our app widget.


As you can notice on screenshots the app works! Your Shopify store locator app is ready to bring you, new customers. If you still don’t know how to install our app we have prepared a special gif tutorial for you which will explain you everything in a few seconds!


Anyway if you struggle with adding a Nearplace JavaScript code to your Shopify website, please leave us a comment or type to the support and we will find the solution for sure.

Get notified of new articles
45,285 marketers are