Installation Guide

Follow a few simple steps to have Maps by Develic up and running on your Shopify store.

1) Add Maps by Develic to your store

You can add our app to your store from Shopify App Store. After installation, you will have to accept recurring payment for $4.99 per month (the first 7 days are free to use). If you uninstall the app within this trial period, you will not be charged.

2) Enable our storefront component for map rendering

Upon installation, you will have to decide if you want to use out storefront component for map rendering. We suggest using our component because it's simple, light, and easy to use. You can turn it on from the application dashboard:

Maps by Develic, Dashboard

If you have skilled developers on your team, you may prefer to use your own map rendering mechanism. In this case, you should disable our storefront component and handle map rendering by yourself.

Also, you can disable this component if you want to briefly hide the map from visitors (for example, when you want to update the map). Just don't forget to enable it back!

3) Fix templates of necessary pages

To make maps working, please add the following code to the "layout/theme.liquid" template of your theme right before the </body> tag.

{% if page and != blank %}
<div style="display: none">
<div develic-map="{{ | escape}}"></div>
{% endif %}

You can edit your liquid template file by clicking on "Edit HTML/CSS" menu item of your current theme ("Online store" section of the admin in "Themes" sub-section):

Maps by Develic, Liquid templates

Then open the theme.liquid template under the layout folder and add the code snippet there (before the </body> tag).

Here is the example of how this code may look when added to the liquid template:

Maps by Develic

Then add the following code in HTML mode to the target page where you want to see the map (either put it in the page description or HTML block in any page builder you may use).

<div develic-map-container=""></div>

This code defines where the map widget will be rendered on the page.

The screenshot below is the example of how to add this snippet to the page description in HTML mode:

Maps by Develic

You will not see the map immediately in the description in the non-HTML mode. So please, be careful not to remove this added code later.

The screenshot below illustrates that the map is not visible in non-HTML mode:

Maps by Develic

If you're using any page builder (Gempages, Shogun, etc), instead of adding this code to the page description code, please create an HTML block inside the page builder, and add the code there.

4) Generate Google Maps / Geocoding API key

Our application requires you to generate Google Maps / Geocoding API key and provide it in the maps settings so our widgets can properly render Google Maps. The only pre-requisite for this is having a Google account.


There are 2 major requirements related to generating the API key:

  1. Under "APIs & Services" section, you must enable "Maps JavaScript API" and "Geocoding API".
  2. Under "Billing" you must add your credit card information (don't worry, Google provides you with $200 free credit each month).

If any of the requirements are not met, you may see the message "For development purposes only" on your maps.

Google Maps Platform Pricing:

You can find more information about Google Maps platform pricing at

To calculate the projected expenses, please consider the following points:

  1. Google Maps API charges are completely separate from Shopify charges for our app.
  2. You will get $200 free monthly usage for Google Maps Platform.
  3. Maps JavaScript API costs $7 per 1000 requests (1 map render - 1 request).
  4. Geocoding API costs $5 per 1000 requests (1 address search ~ 3 requests) [only when Geocoding is enabled in our app].

So in general, your $200 free monthly credit will get you more than 28000 map renders (if you're not using Geocoding search).
Basically, this $200 free credit will be more than enough for the majority of the stores.

But if the page with the map will get significant traffic from your clients, you may be charged by the Google Platform.

To begin the generation, open Google cloud console page here:

Then create the project there with any name you want:

Google Console, create project

Next step, open "APIs & Services" and on Dashboard click on the button "Enable APIs and Services".
Then find and enable 2 APIs: "Maps JavaScript API" and "Geocoding API".

Google Console, api project Google Console, add new

Now navigate to "Credentials" section under "APIs & Services" and click on "Create credentials" button. Pick "API key" as a type of credential (not "Oauth client ID" and not "Service account key"). Eventually, you will get the API key that you can use in our app:

Google Console, API credentails Google Console, API credentails final


To do so, please click on the "Edit API key" button for your API key, set "Application restrictions" option to "HTTP referrers (web sites)", and add the following items to the "Website restrictions" option:

  •* (so your key will work in our app)
  •* (replace "yourstore" with your actual domain, so your key will work on your shopify domain)
  •* (replace "yourstore" with your actual domain, so your key will work on your live domain)

Don't forget to add /* at the end of URLs just like in the examples.

Here is an example of a well-protected API key:

Protected API key Example

Now you can use this generated API key in our application in the "Google Maps API key" field to render maps and import CSV data:

Maps by Develic, Google Maps API key setting

The final check is to make sure that billing is enabled!

Please, open "Billing" section and add your credit card data. Google will provide free $200 credit each month, so until you exceed this free credit, you will not be charged by Google. If you don't add your billing information, Google will render "For development purposes only" over your maps.


If you have more than one map on your store, you can use one generated Google Maps API key for all of them. But you will have to put this same API key into each of those maps settings.

5) Add locations to the map

Get back to the application dashboard, pick your page, and hit "Add or modify the map" button. Add your locations there via the map editor component.

Here, you can use the API key you created on the previous step...

Maps by Develic, Promo C Maps by Develic, Promo B

Hint! Don't forget to save your map before continue (just click on "Save" button on the map editor page).

6) Check your map on the storefront

Now, open your page on the storefront (as you open all other pages). If everything is done correctly, you should see the map there.

Maps by Develic, Set template

That's all! At this point, you should have a working map widget on your store.

If you're struggling with product spinners placement or facing any other issues, please contact our support team.