Star Map lets shoppers search for a specific location by typing an address or place name, and select a date by typing or choosing from the calendar. As they type the location, live suggestions appear directly in the input field. Once a location is selected, the star map updates automatically in the product preview.
The date picker is pre-filled with today’s date, but shoppers can change it by clicking and selecting a different one. Once a date is selected, the star map updates to reflect the stars on that specific day.
When you add a Star Map option to your option set, it creates one field in the backend, but shoppers will see two inputs on the product page — one for the location and one for the date.
You can configure how the star map search looks and behaves, and decide how it will be used to personalize.
In this article:
Settings you can configure on a a Star Map Search
When you select Star Map as the option type, a search field for location and a date picker for the date will appear on your store. These options work together, and can't be separated.
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"). The date picker always appears below it with the default label “Pick a date.”
Required
Make the location 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 to guide your shoppers. The help text will appear below the date picker option.
Custom CSS Class (Advanced)
Add a custom class name to target and style these two options through CSS in your store’s developer settings.
Hide Option (Advanced)
Hide both options completely from shoppers — helpful when you want to include fixed map in the preview without letting customers change it.
How Star Map Search is used to Personalize
The Star Map option lets shoppers select a specific location and date — and the stars for that location and moment are displayed in your design thanks to the function already assigned to the star 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 Star Map option comes with the Star Map Search function pre-defined — you just need to link it to a compatible element in your design.
Star Map Search works with the following element:
Star Map Element – Displays a star map based on the shopper’s selected location.
Just connect the star map option to the right element in your template, and Customily takes care of the rest!