User Settings
The User Settings component allows your registered customers to edit the content of their profile. It takes advantage of Reflow's Auth feature.
The component has two states depending on the customer status:
- Guest - Shown when the customer is not logged in. This state displays a button for signing in with an existing account or creating a new one.
- Authenticated - For logged in users, the
User Settingscomponent shows a form with a number of inputs for changing the user's profile photo, name, email, shipping address and more.
Examples
- Adding a basic User Settings component to a page: Demo | Source Code
How to Embed
To embed this component on your website include the reflow library, and add the following tag somewhere in the <body> of your page:
<div data-reflow-type="user-settings"></div>
Supported Attributes
You can configure the auth button behavior and the way it's rendered by specifying additional data-reflow-xxx attributes.
| Attribute | Possible Values | Description |
|---|---|---|
| data-reflow-type | user-settings | Must always be set. |
| data-reflow-show | photo, name, email, phone, address | (optional) Comma separated list of form sections to display when the user is logged in. The sections not in the list will be hidden. Example: data-reflow-show="photo, name" |