Display delivery areas on a page in your Shopify Store

Automatically display the delivery areas configured in Ship Sketch on your Shopify store

How does it work?

When enabled you will be able to install a Google map on a page in your store displaying your delivery areas and shipping prices. Everytime you update your delivery areas in the Ship Sketch app they will be automatically exported to your store.

Delivery area map example


1) Enable the delivery area map feature

Open the Ship Sketch app in your Shopify admin and then select “Store Delivery Map” from the navigation. Then click on “Install Store Delivery Map”. This will ask you to approve a few new permissions that are needed for this feature and then install the required javascript on your store. Your stores functionality will not be changed at this point. Install checkout map

2) Create a Google Maps API key

To display a Google Map on your store you need your own Google Maps API key. To generate one use our Google Maps API key guide.

Once generated copy this key into the “Google Maps API Key” field under “Map Settings”.

Map settings

3) Install the map page template

To create the map page on your site you need to install the custom Ship Sketch page template. In the “Install Theme Code” section first select the theme you wish to install the template on. The template that says “(main)” is your current live template. The click “Install now”.

Install page template

4) Create a new page using the installed template

Click on “Create new page”. This will bring you to the Shopify form to create a new page. Enter the title and content, this will appear above the map. In the “Template section” select “page.shipsketch.delivery_map” as the “Template suffix”. Save the page and you can see it live on your site now by clicking on the “View page” button.

Create map page