This is a concept for a pricing page implemented fully in Framer. It was informed by feedback from the members of the customer success and customer service teams. The primary improvements for this page were focused on allowing users to easily compare the availability of features across plans and to make the information for each feature easily digestible.

The display prices collapse once the features section of the pricing cards enters the viewport. The collapsible submenus with sticky subheadings are achieved through the use of nested components, y-axis offsets, and Framer’s events feature. Each entry in the submenu is derived from a single component, which can be updated globally and overrides applied.

In the mobile view, users can toggle left or right between pricing plans without resetting the y-axis position of the card. This makes comparing feature availability across plans much easier on mobile devices. The most popular plan is displayed by default at the mobile breakpoint.

The transaction table is responsive and displays the benefits and costs associated with each seller model. Each business pays different fees depending on transaction size, business size, and seller model. This table allows users to dynamically update the information in the table as they toggle to their business size.