Maps by Develic, logo

Add Google Maps with store locations to your Shopify store!


Step 1: Add Maps by Develic to your store

You can add our app to your store from Shopify App Store or from the login page. After installation, you will have to accept recurring payment for $4.99 per month. Don't worry, first 7 days are free to use. If you uninstall the app withing this trial period, you will not be charged.

Step 2: Decide if you will use our storefront component for map rendering

Upon installation, you will have to decide if you want to use out storefront component for map rendering (which is enabled by default). We suggest using our component because it's simple, light, and easy to use.

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.

Step 3: Fix liquid templates of necessary pages

Be sure, you added the following code to the liquid templates of the pages with maps:

<div develic-map="{{ | escape}}"></div>

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: Editing Liquid templates.
Opening HTML/CSS editor in Shopify admin.

Let's create a separate template for the map page. To do that, click on "Add a new template". In the dialog select "page" in the dropdown, set "map" as the name, and click on the "Create template" button. This will create a template.

Maps by Develic: Creating new template
Creating new template.

Now open newly created template under Templates category and add the necessary code there:

Maps by Develic: Editing Page template.
Patching page.liquid to enable maps support.

Finally, make sure you specified this template as the primary for the page:

Maps by Develic: Editing Map page.
Changing map page Template setting.

© 2017 Maps by Develic