Installation Guide

Add Omnium Maps to your Shopify 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.

At this moment, you should see the dashboard of our app:

Now you're ready to start setting up your maps.

Step 1: Create or update your maps

In Omnium Maps, all maps are linked to the pages where they are displayed. That's why you need to start by picking a page where you want to see your map. You can do this from "Step 1" in the app's dashboard.

After selection, click on the "Create a new map on this page" or "Modify the existing map on this page" button. This will open the map editor for the selected page.

From now on, you need to do a few things: set your Google Maps API key, configure map options, add or edit locations, and save your changes.

Set your Google Maps API key

Once you generate your API key, please add it to the first setting of the map:

Configure Map Options

We have more than 20 customization options for you to choose from:

Add or Edit Locations

The process of adding or editing locations is quite intuitive.

Save your Changes

When you do any changes, please don't forget to save your map by clicking "Save changes" above or below the map.

(Optionally) Preview your map

Please, always save your data before previewing!

To preview your map, simply click the "Preview" button that is located to the left of the "Save changes" button.

You will see a clean preview of your map (without any styling from your main theme).

Step 2: Set up map rendering for your visitors

Go back to Dashboard and activate map rendering on your storefront from Step 2:

When activated, this block will look like this:

Step 3: Load map data into pages of your theme

As a final step, you need to let our app know where exactly on the page you want to place your map.

Depending on your theme, there are 2 ways to do it:

• Recommended - for new themes that support "Custom Liquid" section in the Theme Editor;
• Legacy - for older themes that do not support "Custom Liquid" section.

Recommended (if your theme supports "Custom Liquid" section)

Open your page in the Theme Editor and add "Custom Liquid" block with the following content:

<div develic-map="{{page.metafields.maps-by-develic.data | escape}}"></div>

Like this:

If you don't see your map immediately in Theme Editor - don't worry!
Just save your theme with the new section, and reload the page - the map should be there.

If your theme doesn't support the "Custom Liquid" sections,
or you want to place your map inside some other block, please try the "Legacy" approach.

Legacy (if your theme doesn't support "Custom Liquid" section)

To load map data into your theme, please add the following code to the "layout/theme.liquid" template of your theme right before the </body> tag:

{% if page.metafields.maps-by-develic.data != blank %}
<div develic-map="{{page.metafields.maps-by-develic.data | escape}}"></div>
{% endif %}

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

Then, to define where the map will be rendered on the page, add the following code in HTML mode (and not in Rich Editor 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:

Warning! 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.

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.

Check the map on your storefront

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