All Collections
Integration
API & Webhooks
[Shopify] Mapsly setup guide
[Shopify] Mapsly setup guide

Learn how to sync updates between Shopify and Mapsly

Erik avatar
Written by Erik
Updated over a week ago

This guide explains how to push updates from Shopify to Mapsly and back from Mapsly to Shopify using Zapier & API, as well as how to embed Mapsly into Shopify dashboard.

Prepare your data using Google Sheets

In order to set up integration between Shopify and Mapsly you need to prepare a Google Sheet that will contain data for a one-time import. For this example we will use a simple Customers database that will contain the following fields: id, Name, and Address:

Because Shopify does not include the IDs of customers in exported CSV files, you would need to use a 3rd party integration for that. In this example, we will use Matrixify which has a free plan available:

Then, create a new Google Sheet, create the corresponding columns and import your data to your Google Sheet:

Keep in mind, that the id field has to be stored in column A. If you want to configure different field types, please use this Google Sheets configuration guide.

Then, connect your Google Sheets to Mapsly as described in this guide.

After you import your sheet you can disable the sync between Google Sheets and Mapsly since it is no longer needed:

Generate API key

Generate an API key to your newly created data source by following this guide.

Send data from Shopify to Mapsly

There are 2 ways to synchronize your data from Shopify to Mapsly: via Zapier and via API (webhooks). Below we will explore both options.

Using Zapier

Note, that Zapier requires "Premium" plan in order to connect to Shopify.

1- Log into your Zapier account, press Make a Zap:

2- Search for "Shopify" app and create a new Zap with trigger "New Customer":

3- Connect your Shopify account to Zapier:

You will be asked to enter your Shopify username:

Then, you will need to click on the "Install unlisted app":

4- Test trigger:

5- Select Mapsly as your Action app:

6- Choose "Create/Update Record" event for Mapsly:

7- Connect your Mapsly account:

In the pop-up window that will open, enter the Mapsly API key you generated earlier:

8- Add every field that you would like to synchronize and pick corresponding Shopify fields:

9- Test and Publish Zap:

You can send a test request inside Zapier and then Publish Zap. After that, you can go to Shopify and create/update a record and check if it was successfully saved to Mapsly.

Your zaps will be executed once per 1-15 minutes depending on your Zapier plan. You can also manually execute them by clicking Run Zap in the Zap's context menu:

Now you need to create a similar zap for the "Updated customer" trigger. The configuration is exactly the same as for the above zap.

Using Shopify webhooks

There are many different apps that allow you to create workflows with webhooks to send HTTP requests on records create/updated/deleted. In this example, we will cover the "Customer created" and "Customer deleted" webhooks provided by React Flow:

This app is available with the free plan, but if you want, you can use other apps too.

First, create a workflow with "Customer created" trigger. As an action you need to choose "Send HTTP request", chose "Post" as the method, and add the following URL:

https://api.mapsly.com/v1/record?apikey=your_Mapsly_api_key&entity=Contacts

where you need to add your Mapsly API key obtained earlier.

After that, add the header:

Content-Type: application/json

and body:

[
{
"id": "{{customer.id}}",
"Name": "{{customer.firstName}}",
"Address": "-{{customer.defaultAddress.address1}}"
}
]

Similarly, you need to create another workflow with trigger "Customer deleted", method "Delete", same URL and header, and the following body:

[
{
"id": "{{customer.id}}"
}
]

You can now test these webhooks.

Embed Mapsly into Shopify page

To embed Mapsly into your Shopify pages, simply open the Page settings and paste the following iframe to your content's HTML code:

<iframe src="https://app.mapsly.com" allow="geolocation" style="width: 500px; height: 500px;"> </iframe>

You will then see Mapsly embedded inside your Shopify page. Feel free to adjust the height and width of the iframe.

Implementation is included in your Mapsly subscription!

Your Mapsly subscription comes with implementation services, so we're inviting you to book a web call with our engineer today - to learn more about your use scenario and help you integrate Mapsly with your system. You may also ask us for help in chat any time 24/7.

Did this answer your question?