Upzelo Pricing Page | Framer Custom Code Component

Upzelo, a customer loyalty, referrals, and memberships platform, needed to update their pricing page to reflect a new volume-based pricing model. The goal: a select/dropdown menu where users pick their desired monthly order volume, and the pricing updates dynamically across their Standard ($199/mo), Pro ($349/mo), and Enterprise ($799+/mo) tiers.

The request came directly from Phil Carr at Upzelo via the Framer Community, referencing Bird.com's pricing page as the interaction model to follow.

I built a custom Framer code component that handles the entire volume-based pricing interaction:

Dynamic dropdown menu allowing users to select monthly order volumes (1,000 to 7,000+)

Real-time price updates across all plan tiers based on the selected volume

Property controls built into the component so the Upzelo team can update pricing amounts, volume tiers, and basic dropdown styling directly from the Framer editor, with zero code changes needed

Clean, on-brand styling that integrates seamlessly with Upzelo's existing Framer-built site

A key part of this build was making the component self-serviceable for the client. I added property controls to the code component so the team can:

Update pricing and amounts for each tier

Adjust basic styling options for the dropdown

Add or modify volume breakpoints

This means Upzelo can adapt their pricing as their commercial model evolves, without needing a developer for every change.

The component is live on Upzelo's pricing page, powering their volume-based pricing selector across three plan tiers. Phil Carr from Upzelo shared this after delivery: