An interactive map on Shopify without a map app
A client wanted their contact page to carry an interactive map, an illustrated image of their part of the world with clickable pins marking the places that matter to them. The usual route is a store-locator app, which brings a monthly fee and someone else’s styling. Their case did not need live map data at all, so we built it as a theme section instead.
What we did
The section takes any image and lays branded pins over it as repeatable blocks. Each pin is placed by a horizontal and vertical percentage, and carries a title, a short description and an optional link. Because the positions are percentages, the pins stay put at every screen size, and because they are theme blocks, the team add or move them in the editor the way they would edit any other content.
The build had one genuinely fiddly corner worth recording. When a visitor drags to pan the image, browsers helpfully start a native image drag instead, the ghost-image kind you get when dragging a photo out of a page. The fix is small, turning off pointer events on the image itself and cancelling the drag event, but until you know that, panning feels broken on desktop and nobody can tell you why.
What to take from it
Not everything that looks like app territory is app territory. A locator app earns its fee when you have fifty stockists and live search. For one image and a handful of pins, a section you own does the same job with no subscription, styling that matches the rest of the site, and content the team edit themselves. It is worth asking which kind of problem you have before installing the answer.
