Installation Guide

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 within this trial period, you will not be charged.

Step 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!

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="{{page.metafields.maps-by-develic.data | 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, Liquid templates

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 page.map.liquid template.

Maps by Develic, Create page

Now open newly created page.map.liquid template under Templates category and add the necessary code there:

Maps by Develic, Edit Liquid

Make sure you specified this template as the primary for the page. Please, note that map should be published (Visibility set to 'Visible') for your customers to see it.

Maps by Develic, Set template

Step 4: 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.

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

Step 5: 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 working maps widget on your store.

If you're experiencing any troubles with the process, please let us know!