With custom maps, you can let customers immortalize a special place. By choosing a location the map will show the area so customers can pick their favorite spot. You can format maps in different ways to offer customers further personalization options.
How It Works
When you add a Map element to your design:
-
Shoppers will type an address or location, and a live map will be generated instantly.
-
You customize the style, size and shape of the map.
-
Shoppers can change the map locations and zoom level.
- If multiple style options are added, shoppers will see options to pick from them.
In this article:
To add a map
You can add maps on Designs and on Templates, by clicking the Map button.
Each map you add will have a Name that you can edit, and a Unique Id for you to easily identify it.
Transform the map
Directly on the canvas or by expanding the Transform toolbox, you can transform the map:
Change the map style and behavior behavior
Changing the behavior of the map will affect what options are available for customers to further personalize it. You can configure different behaviors:
Initial location
Changing the initial location will affect what the map displays when loading. The location is an option that customers always need to fill in, so whatever you choose here will only apply to the initial loading of the map.
- Select the map
- Expand the Map Behavior toolbox
- Click Select Initial Location
- Type a desired location. You can type a specific address, a city, or a country
- Zoom in or out and move around to get the exact view you want to load
- Click select
Add a mask to the map
Masks let you give the map a particular shape (other than a square or rectangle!).
- Select the map
- Expand the Map Behavior toolbox
- Click Upload mask
- Select the JPG file you want to use as a mask.
For masks to work, the file needs to be a black-and-white image of the mask, where the shape you want the placeholder to have is black and the background of the image is white, in good quality (we recommend at least 1000x1000 px), since the better the quality the smoother the mask. Here are some examples of masks:
Tip
You can also create masks simply by layering elements on top of each other. This is especially helpful if you want to mask images with a specific design on top of them. To achieve this add a PNG on top of the map using a dynamic image, or a vector using a dynamic vector.
Choose Map Style
You can choose one or multiple styles for your map. By default, the street style comes selected, but you can choose as many styles as you want. When choosing more than one style, they will be available for your customers to pick they want to use while personalizing.
- Select the map
- Expand the Map Behavior toolbox
- Check/uncheck the styles that you want to make available
Tip
The map styles available are pre-defined by Customily, we offer a wide range of styles and continue to add more! You can find a list of all the styles available here.
When you choose several styles, a choose map style option will be added to your product, like this: