How I Got Aloha’s Dynamic Pricing System Working in Framer

When Aloha decided to simplify how customers understood their plans, the team wanted a pricing page that could automatically adapt to every visitor, language, region, and business size, all in real time. My job was to make that happen inside Framer.

The Goal

• Auto-detect a visitor’s region (via IP or language fallback).

• Pre-select the right currency and region.

• Let users manually change both.

• Dynamically update the three pricing cards (Pro, Pro Suite, Pro Suite AI) based on the number of units selected.

• Keep everything localised for English, Spanish, and Portuguese.

• All while staying pixel-perfect with the design.

The Process

I started by designing the new dropdown system for region and units — clean, minimal, and responsive. Then I wrote a pricing logic that pulled values from a structured JSON file (prices_aloha.json) containing every region, plan, and unit range.

Next, I wired in IP-based region detection using ipapi.co so that users from the UK see pounds, Europe sees euros, and Latin America sees USD. If IP failed, it fell back to browser language priorities (EN → USA, ES/PT → LatAm & Brazil).

I built a global pricing context in React inside Framer’s custom code component, so every card on the page updates instantly when the user changes units or region — even across separate sections (hero vs. body container).

Finally, I tested responsiveness, multi-language consistency, and pricing logic across devices and regions.

The Solution

The new pricing page feels seamless, it detects your region, pre-fills your currency, and adjusts prices on the fly when you tweak your units.

Aloha’s team now has a scalable, flexible pricing system they can easily update without touching code — just swap JSON values or upload a new sheet.

Preview link; https://aloha.co/pricing