Map Customization
Match the map to your theme: colors, sizes, mobile layout, the date picker, and every display option.
Where to customize
Wayfinder’s look and behavior are set in two places:
| Where | What you change there |
|---|---|
| Theme editor → Wayfinder Map block | Colors, map size, mobile height, which buttons show, the date picker, and pickup display. |
| Wayfinder app → Map Settings | All the wording customers see, the map provider, the coordinate format, and which steps are required. |
Open the theme editor
In Shopify admin, go to Online Store → Themes and click Customize.
Go to the page with the map
Use the page selector at the top to open your cart or product template, wherever you added the block.
Select the Map block
Click Map in the left sidebar. Its settings open on the right, and changes preview live. Click Savewhen you’re done.
Display options
These switches are in the Map Settings group at the top of the block.
| Setting | Default | What it does |
|---|---|---|
| Display Location Coordinates | Off | Shows a card under the map with the customer's latitude and longitude. |
| Disable My Location Button | Off | Hides the button that finds the customer using their device's GPS. |
| Disable Satellite/Map Button | Off | Hides the switch between standard and satellite view. |
| Enable Pickup or Local Delivery Buttons | Off | Adds a Delivery / Pickup switcher. See Pickup Zones. |
| Show Delivery Zone Boundaries | On | Draws your delivery zones on the map so customers can see where you deliver. |
| Show Pickup Locations in Delivery Mode | Off | Shows store pins in delivery mode too, not just after switching to pickup. |
| Auto-fill shipping address from Wayfinder location | On | Fills in the checkout shipping address from the confirmed location. Customers can still edit it. |
| Hide Map Canvas | Off | Hides the map itself but keeps address search and zone checks. Good for a compact layout. |
Want just an address box?
Turn on Hide Map Canvas to show only the search field. Wayfinder still checks the address against your delivery zones, and in pickup mode it lists your stores instead of showing pins.
Colors
Match the map to your brand in the Map Style group. The defaults are neutral black and white, so most themes look fine without changes.
| Setting | Default | Used for |
|---|---|---|
| My Location Button Color | #000000 | Background of the “Use My Location” button |
| My Location Text Color | #FFFFFF | Text on that button |
| Map/Satellite Active Button Color | #e2e2e2 | Highlight on the selected view (map or satellite) |
| Map/Satellite Active Text Color | #000000 | Text on the selected view button |
| Map/Satellite Inactive Text Color | #000000 | Text on the other view button |
| Confirm Location Button Color | #000000 | Background of the “Confirm Location” button |
| Confirm Location Text Color | #FFFFFF | Text on that button |
| Map Pin Color | #389DFB | The customer's delivery pin |
| Delivery Zone Border Color | #2c6ecb | Outline of your delivery zones |
| Pickup Store Pin Color | #e85d04 | Store pins and the “Select for pickup” button |
Tip
Give the confirm button your theme’s main button color so it reads as the next step. Keep the pickup pin color clearly different from the delivery pin so customers can tell them apart.
Size and layout
| Setting | Default | What it does |
|---|---|---|
| Headline Alignment | Center | Alignment of the headline above the map. |
| Instructions Alignment | Center | Alignment of the instructions text. |
| Default Map Width % | 80% | Map width as a share of the space the block sits in. |
| Default Map Height % | 55% | Map height on desktop. |
| Coordinates Card Width % | 60% | Width of the coordinates card, if it's turned on. |
| Mobile Map Height % | 80% | Map height on phones, set separately from desktop (in the Mobile View group). |
After changing sizes, use the device toggle at the top of the theme editor to check both desktop and mobile. A taller mobile map is easier to drag with a thumb. Just leave enough room below it for the confirm button.
Requested date picker
Let customers choose when they’d like their delivery or pickup. Turn on Enable Requested Date Picker in the Date Picker group.
- Customers see Today, Tomorrow, and Pick a Date, which opens a calendar. Past dates can’t be chosen.
- The choice is saved on the order under Additional details as
Requested Delivery DateorRequested Pickup Date. - Date Button Color (default
#000000) sets the button border and fill. Date Button Text Color (default#FFFFFF) sets the text on the selected button. - To make choosing a date required before checkout, turn on Make requested delivery/pickup date mandatoryin Wayfinder’s Map Settings.
Wording
Every piece of text customers see can be changed in Wayfinder’s Map Settings, for example to match your brand’s voice or to translate it.
| Field | Default |
|---|---|
| Headline | Delivery Location |
| Instructions | (empty) |
| Search Bar Text | Enter Address to Search Location |
| My Location Text | Use My Location |
| Confirm Location Button Text | Confirm Location |
| Confirm Message | Location Confirmed |
| Location Unavailable Message | This address is outside our delivery zone |
| Change Location Text | Change Location |
| Delivery & Pickup Headline | Select Your Delivery Method |
| Local Delivery Text | Local Delivery |
| Pickup Text | Pick Up |
Other Map Settings that change the experience
- Use customer browser location as default location: starts the map at the customer’s position if they allow it.
- Restrict address search to your store’s country: keeps search results in your country.
- Coordinate format: Decimal Degrees or DMS (degrees, minutes, seconds) for the coordinates saved on orders.