Watch People Shop Help

Watch People Shop makes these changes to your theme:

* /snippets/watch-people-shop-body.liquid - The Google map style you select for your map is stored in this file
* /snippets/watchpeopleshop.liquid - Snippet you can include anywhere on the site that you want a map


Adding a Link To You Map Page

The Watch People Shop Map will be available on <MyShop.com>/apps/map. You can add a link to the map page from your sites navigation menu like this:

From your store admin go to Online Store > Navigation and select the menu you want to change:

Navigation Menu

And then add a new link to "/apps/map" and click Save:

Navigation Menu

More details can be found in the Shopify documentation here.

Styling Your Map

You can  pick an existing style for your app form our library of pre-built styles.

Pick an existing style for your map

Once this is done you can customise the look of your app using any of the features of Google Maps.  See https://developers.google.com/maps/documentation/javascript/styling for details on styling.  You can also find more styles you can copy and paste from https://snazzymaps.com/

After updating the style javascript click "Preview >" to see your changes and "SAVE MAP STYLE" once you are happy and want them applied to your site.

Changes you make to the latitude / longitude your map is positioned at and the Zoom Level of the map will also be reflected on your site once you click 'SAVE MAP STYLE'

Customise your map

Customizing the Map Pop Over

From the 'Popover Style' tab of the app you can changes the styles of the popup.  Refer to the inline documentation in the CSS for details.

Changing Popover


Embed Map Into Any Page On Your Site

To embed the map into any page on your site simply add:

{% include 'watchpeopleshop' %}

Or if you want to control the width and height of the map add this to your template

{% assign watchpeopleshop_style = 'width:300px;height:300px' %}      
{% include 'watchpeopleshop' %}

This will add a widget like this to your home page:

Embeded App

For example to add this to your home page add the code above to index.liquid.