About Commerce-UI

Commerce-UI is a team of world-class developers building headless ecommerce to help brands grow. With custom ecommerce sites that combine aesthetics with technology, Commerce-UI is defining the future of ecommerce.

Commerce-UI selects the best technology providers for their clients, keeping the bar high for design quality and performance. When building the ecommerce site for Liftfoils, the leading eFoil surfboard company, Commerce-UI recognized that the online store locator would be as important as the product configurator. With a product like Liftfoils boards, most customers want to take a test ride before making a purchase, which means that being able to locate a nearby dealer is a critical part of the customer journey.

The challenge with premade Store Locator maps

Out-of-the-box locator apps come with limitations on functionality, performance, and interface design. Commerce-UI knew that given the importance of the locator feature for Liftfoils' ecommerce and their global network of over 300 demo locations that a custom map was the right solution for their client, and that Mapbox was the map engine for the job.

Mapbox offers intuitive location experiences and fully customizable features

When Commerce-UI builds an ecommerce site the goal is a user experience that feels more like a mobile app than a responsive website. The locator map should display results instantaneously with a loading time close to zero. Mapbox GL JS delivers, making it easy to build a highly performant interactive map that feels polished regardless of screensize. Liftfoil’s custom data points for dealer locations, managed in Sanity CMS, integrate seamlessly with the map.

In the case of Liftfoils, with dealer locations around the world, Commerce-UI needed a locator map that would look beautiful and load smoothly for both global and local map views. Designers working with Commerce-UI used Mapbox Studio to shape the visual style of the map and experiment with customer marker design, saving time on back-and-forth feedback and ensuring the final map style met designers’ expectations while letting developers focus on building the map interactions. 

The best store locators anticipate user expectations and make the location search frictionless and intuitive. Using Mapbox Geocoding, Commerce-UI could quickly support any kind of placename query —a country, street, or point of interest— and speed up the search experience with autocomplete. 

The map responds immediately to a search with a fly-to animation to the area of interest, automatically adjusting the map zoom level based on the number of locations in a specific area. Customers want to see the dealer location closest to their search area, so the locator should always try to show at least one result. Commerce-UI achieved this by using Turf.js to build a custom bounding box based on the user’s location and the nearest available store.

Commerce-UI developers and clients are impressed

Commerce-UI built their first custom Mapbox store locator with only two weeks of developer effort. Products like the Mapbox Geocoding API anticipated developer needs and made adding core features like location search fast and easy. 

Location features of an ecommerce site are a key link between online retailers and their customers, helping customers discover new brands and ensuring they can place and receive their orders smoothly. The team at Commerce-UI builds with Mapbox because they know they’ll have access to the latest location features to wow clients such as Maps Internationalization and Globe view.

‍