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 or Google Maps App To Shopify

NearPlaceNearPlace

 


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.

shopify-interface

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

shopify-themes

 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.

shopify-edit-theme-code

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.

shopify-code-sections

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

header-theme-code

Modifying a code.

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

shopify-theme-header-script

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!

nearplace-script-store-locator-app

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.

nearplace-store-locator-generate

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

shopify-theme-customization

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

nearplace-on-page-locator

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!

gif-shopify-store-locator-tutorial

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.