How can I create a store locator page in Webflow? The user should be able to input a postal code, and the nearest store should populate on the map and in a listing. I plan to use an XML feed connected through Zapier.

You want to build a store locator page in Webflow that dynamically shows the nearest store based on a user’s postal code input, with integration using an XML feed via Zapier. Webflow alone can't filter based on geographic proximity, so you’ll need to use external tools for geolocation and filtering.

1. Prepare Your Store Data with Latitude/Longitude

• Ensure your XML feed contains geographic data, specifically latitude and longitude for each store.
• If your XML feed only has postal codes, use a geocoding API (like Google Maps API or OpenCage) in Zapier to convert them into lat/lng when importing into Webflow.

2. Import Store Data into Webflow CMS via Zapier

• Set up a Zap to automatically extract data from your XML feed and create or update CMS items in Webflow using the Webflow API.
• Fields should include: store name, address, postal code, latitude, longitude, and any meta fields (e.g., hours, phone).

3. Integrate a Map with Custom JavaScript

• Webflow doesn’t natively support dynamic maps, so you’ll need to embed a Google Maps or Mapbox widget using a custom embed block.
• Use the Webflow CMS API or DOM elements to loop through store data and plot markers on the map using latitude/longitude.

4. Add a Postal Code Input Field

• On your Webflow page, create a form input for postal code and a submit button.
• When submitted, use client-side JavaScript to:
• Geocode the inputted postal code to get coordinates (use Google Maps Geocoding API).
• Calculate the distance to each store (Haversine formula or a mapping library).
• Sort stores by proximity and update the map/list accordingly.

5. Display Store List and Update on Search

• Bind each store CMS item to a hidden div or collection list on the page.
• Use JavaScript to dynamically:
• Show only the closest store(s) once the postal code is entered.
• Optionally, highlight the selected store on the map.

6. Optional: Use Jetboost or Finsweet’s CMS Filter

• While not natively capable of geo-distance filters, Finsweet’s CMS Library or custom JS may support showing/hiding results dynamically after filtering.
• But distance-based filtering requires custom logic—you’ll still need custom code for the proximity sort.

Summary

To build a store locator in Webflow with postal code-based filtering, use Zapier to import store data via XML, geocode store locations, and embed a custom map with JavaScript. On form submit, geocode the postal code, calculate the closest store, and update the UI dynamically using JS. Webflow CMS acts as your data layer, but proximity filtering must be handled externally.