Configure the My Account page

In this article, we'll explore the elements and configuration options that allow you to create a tailored and engaging experience for your app users.

1. About the My Account page

The My Account page in your app is a crucial hub of information and functionality for your users. Due to the in-depth integration with the platform’s backend, the client data is synchronized with your website to create a seamless experience for your clients.

On this page, there are a set of default buttons, and you can add configurable buttons. See more information below.

Overview of default buttons:

Profile: Access and update personal information, including name, email address, and password.
Address book: Store and manage billing and shipping information for seamless checkout experiences.
Notifications: Inbox of received push notifications
Order history: Track and view past orders, sorted by status for quick reference.
Wishlist: Keep track of desired items and save them for future purchases.
Recently viewed: Access previously viewed products for easy reference.
Settings: Adjust users’ account preferences and app-specific settings. Note that the delete account feature is also supported.

A new My Account design, with separate Signed out and Signed in modes and more content blocks, is available for selected apps. See section 3.

2. How to configure the My Account screen?

This section describes the standard My Account design. If your app uses the new design, see section 3.

2.1. Built-in buttons

The aforementioned default action buttons provide a solid foundation for user account interactions. You can’t customize or delete them. You can only reorder them by dragging them to another position within the page.

2.2. User-defined buttons

With Alphonso, you can tailor the page to your needs by adding new action buttons integrated with custom pages. To create a new action button, simply follow these steps:

Step 1: Go to Design > My Account.

Step 2: Drag and drop Action button onto the preview pane.

Step 3: Design and manage an action button.

Hover over a button and click Design. From there, you can edit the title, choose an icon from the library, and specify the destination it should link to.

Tip: The buttons you add are expected to provide information about your store, such as About us, Contact us, Terms and Conditions, and Privacy.

To delete a button, hover over it and click Delete.
To reorder a button, drag and drop it in the preview pane.

Step 4: To finish, click Save draft in the bottom right corner.

Please note that saving a draft affects only the design page, allowing you to make further changes. To make the current design available to all mobile users, click Publish to Mobile.

With the flexibility to add, modify, and organize action buttons, you can create a tailored account screen that meets the unique needs of your app and provides a seamless user experience.

If you have any further questions, we’re happy to help! Please reach out to us at customer.success@jmango360.com!

3. Configure the new My Account design

Note: The new My Account design is available for selected apps and requires an app update. To find out whether it's available for your app, please contact us at customer.success@jmango360.com.

3.1. Two modes: Signed out and Signed in

With the new design, you can show different content to visitors and to logged-in customers:

Signed out: what visitors see before they log in. Use it to invite them to sign in and to show content such as promotions or store information.
Signed in: what logged-in customers see. Use it to greet them by name, show their loyalty points and highlight member content.

Go to Design > My Account and select Signed out or Signed in at the top left of the preview. The block panel on the left and the preview change to that mode. Changes made in one mode don't affect the other.

The built-in buttons (see 2.1) are shown in both modes. You can't edit or delete them, but you can reorder them by dragging.

Design > My Account with “Signed out” selected: block panel on the left, preview with the Signed-out message and Sign In button, settings panel on the right.

“Signed in” selected: preview with the My balance block (greeting and points) and its settings panel. Use a sample customer name.

3.2. Blocks you can add

Drag a block from the left panel onto the preview, then click it to edit its settings in the right panel. To delete a block, hover over it in the preview and click Delete. To reorder blocks, drag and drop them in the preview.

Block	Signed out	Signed in	What it does
Signed-out message	✓		Welcome text shown above the Sign In button. Settings: Title (e.g. “Welcome to [store name]”) and Subtitle (e.g. “Sign in to shop faster and track your orders”).
Signed-in message		✓	Message for logged-in customers. Settings: Title and Subtitle.
My balance		✓	Shows a greeting and the customer's loyalty points balance, with a Rewards History link that opens the customer's rewards page. Settings: Greeting (e.g. Hi, {{first_name}}) and Points balance (e.g. You have {{points_balance}} points!). Requires an integration with a Loyalty & Rewards app.
Action button	✓	✓	A button that links to a custom page, e.g. Member Club, Service or Info. Set it up as described in 2.2.
Spacer	✓	✓	Adds space between blocks.
Image banner	✓	✓	A single image, e.g. a campaign or welcome visual.
Image slider	✓	✓	Several images that customers swipe through.
Image grid	✓	✓	Images shown in a grid layout.
Video	✓	✓	A video, e.g. a brand or product video.

Tip: Placeholders such as {{first_name}} and {{points_balance}} are replaced with each customer's own data in the app.

For example the Signed-out message settings (Title / Subtitle) or the My balance settings (Greeting / Points balance) in the right panel.

3.3. Save, preview and publish

Click Save draft to keep your changes. Saving a draft affects only the design page, so you can keep editing.

Click Preview to check your design, then click Publish to mobile to make it available to all app users. Check both the Signed out and Signed in modes before you publish.

If you have any further questions, we’re happy to help! Please reach out to us at customer.success@jmango360.com!