BookingMap by VT Labs. Shopify App.

on March 15, 2018

Get the BookingMap application

Recently we have released our new Shopify extension. You can find it on the App Store. Please, visit our demo store to see how it works.

Our main idea is to turn a regular ecommerce store into a map-based service like Booking or Airbnb.

Main Features

  • Google-powered maps for collection and/or product pages.
  • Markers on the map indicate the exact location of your products.
  • Info pop-ups show additional product information such as an image, a price or an address for each marker.
  • User-friendly admin interface allows you to add coordinates and addresses for each product and collection.

Installation

Click "Activate maps" on the main page to add scripts to the current theme:

Paste the snippet into your "sections/collection-template.liquid" and "sections/product-template.liquid" files where you want your map to appear. Usually, it's the first line (see the screenshots below).

{% include 'bookingmap' %}

How to edit a theme:

How to add code to "sections/collection-template.liquid":

How to add code to "sections/product-template.liquid":

If you have an old theme, you can add snippets to "templates/collection.liquid" and "templates/product.liquid":

Usage

The interfaces for products and collection are similar. To set a marker, click on the map or type address in the search box. To set map zoom, change it on the map via "+/-" buttons. Then click "Save."

You can change the address string manually in "Map Parameters." Don't forget to click "Save."

To remove the marker, click "Delete." It will not affect the product itself.

The form with coordinates is read-only.

FAQ

  • I'm having difficulty installing the app. What should I do?
    Contact [email protected], and we'll be happy to do the installation for you.
  • Can I install the BookingMap app on other ecommerce platforms?
    Сurrently, BookingMap is supported on Shopify only. If you'd like to see it on other platforms, please send a request to [email protected].
  • What display customization options are available?
    If you are familiar with theme modifications, you can adjust the style of maps and info windows, by using your own CSS. Info windows has following classes: "map-info", "map-info-image", "map-info-title", "map-info-price", "map-info-address", "map-info-description".
  • Can I add the map to a product that is not added to a collection?
    Unfortunately, the function is not supported so far.
  • I see "Liquid error (line 1): Could not find asset snippets/bookingmap.liquid" instead of the map.
    Publish your theme and click "Activate Maps" in the app interface.

Support

In case you have any questions regarding BookingMap or require technical assistance please don't hesitate to contact us.

[email protected]

Create your own shopify store