How To Add a Framer Profile Page for Members

Setting up a seamless member profile page is essential for any membership-driven site.

This guide will walk you through building a profile page that keeps your members in control. Let’s dive in and create an experience that enhances engagement and streamlines account management.

Use our free remix as a baseline to help add the member profile elements.

• FirstName - this override displays the member's first name.

• EmailAddress - this override displays the member's email address.

Give your member's the ability to change their password by sending them to your /forgot-password page which has the Forgot Password component. Alternatively, you could place the Forgot Password component on the account page without issues.

Add the profile form provided during setup which will allow members to make changes to their email address, name, and custom fields.

Add a frame or a button component from your project and apply the override SignOut. Make sure this button or frame does not have a redirect link.

Since the account page is only useful to logged in members, there are a few things you can do to ensure only they can access the page.

• Apply to the 'my account' button in your navigation ShowIfSignedIn to ensure only logged in members see the button to take them to their account page.

• Set the /account page to be locked in the dashboard

• Alternatively, rather than locking the page, you can keep the account page visible to all visitors and use overrides to display different content based on the user’s login status. Apply ShowIfSignedIn to the account section so that logged-in members can view their account details. For logged-out users, create a section like the example below and apply ShowIfSignedOut to the entire section.

By utilizing the ShowIfWithTag override with the tag interface component, you can display to the member which products they've already purchased. For example "You're on the lifetime plan!"

Or you could have a frame that says "You are on the free plan, upgrade now!" and wrap it in the ShowIfWithoutTag to be displayed when the user has no tags.

Follow this guide to implement: Conditionally show content to specific tags.

You can also display custom fields on the account page by utilizing fetch. Follow the custom fields guide for more information

If you're utilizing Stripe then you'll want to link your users to a place where they can manage their subscription. To do this, utilize the Action Button component and set the action type to Store and action to Portal.