Map lets shoppers search for a specific location by typing an address or place name. As they type, a popup map (powered by Mapbox) appears with live suggestions and a visual preview, making it easy to pinpoint the right location.
You can configure how the image upload looks and behaves, and decide how it will be used to personalize.
In this article:
Settings you can configure on a a Map Search
When you select Map as the option type, you’ll be able to configure how the search field behaves and appears in your store.
To configure these, expand the option in your Option Set and scroll through the available settings.
Click any item below to jump directly to it:
🛠 Basic Settings
⚙️ Advanced Settings
Label
Text that appears above the search input on your product page (e.g., "Enter a special location" or "Search for your city").
Required
Make this field mandatory by enabling this toggle. If it's required, shoppers won't be able to complete their purchase without selecting a location. An * next to the option label will indicate it is required on the storefront.
Help Text
Add a short description below the input to guide your shoppers.
Placeholder
A sample text that appears in the input field before shoppers type. This disappears when they start writing. For example: “Search for a place…”
Custom CSS Class (Advanced)
Add a custom class name to target and style this option through CSS in your store’s developer settings.
Hide Option (Advanced)
Hide this option completely from shoppers — helpful when you want to include fixed map in the preview without letting customers change it.
How Map Search is used to Personalize
The Map option lets shoppers select a specific location — and that location is displayed in your design thanks to the function already assigned to the map option.
You can learn more about functions and how they work here.
Unlike other option types, you don’t need to assign a function manually. The Map option comes with the Map Search function pre-defined — you just need to link it to a compatible element in your design.
Map Search works with the following element:
Map Element – Displays a street map based on the shopper’s selected location.
Just connect the map option to the right element in your template, and Customily takes care of the rest!