Account Area

Overview

The Account Area provides users with a centralized hub to manage their orders, subscriptions, and personal account settings. It ensures seamless navigation between different sections, allowing users to track their purchases, manage subscriptions, and update personal information with ease. The structured layout and intuitive design enhance the user experience by providing clear and accessible account management tools.

Key Features

1. Account Navigation – Provides a structured layout with clear tabs for Orders, Subscriptions, and Profile.
2. Order History – Displays past orders with key details like order number, date, and total items.
3. Order Details – Shows a full breakdown of each order, including products, pricing, and shipping information.
4. Subscriptions Management – Enables users to view and modify active subscriptions directly within the Account Area.
5. Personal Information – Allows users to update their name, gender, and date of birth.
6. Password & Security – Provides secure password management based on the authentication method.

Navigation & Structure

The Account Area is divided into three main sections:

1. Orders – Provides access to past and current orders, including order details information.
2. Subscriptions – Displays active subscriptions with options to modify or cancel them.
3. Profile – Allows users to manage personal details and password.

Accessing the Account Area

Logged-in users can access the Account Area by clicking on the profile icon in the site’s header.

Orders

The list of orders is extracted from the user.orderSummary payload, which contains all orders associated with the user across various shops. To enhance the user experience, we filter these orders within the Storefront SDK to display only those relevant to the currently selected shop. This ensures that users can focus on their orders specific to the active shop context.

Order History

The Orders section lists recent past purchases, displaying:

• Order number
• Purchase date
• Total amount
• Number of items

Empty State Handling

If no orders exist, an empty state message reassures users and provides a “Continue Shopping” CTA to redirect them to the homepage.

Pagination

If a user has more than eight orders, a pagination component allows easy navigation through older purchases.

Order Details

Clicking on an order redirects users to a detailed order summary page, which includes:

General Order Information

• Order Confirmation Date
• Payment Method
• Billing & Shipping Addresses (displayed together if identical, separately if different)

Product List

Each order contains a detailed breakdown of purchased products. Purchased items are grouped by package for clarity.

The backend provides a flat list of purchased products, meaning that:

• Items are displayed as separate entries, even if multiple units of the same variant were purchased.
• The quantity is always displayed as 1, aligning with the backend data structure.

Each purchased product contains:

• Product Name, Brand, Color, Size, Quantity, and Price
• Subscription Details (if applicable, including delivery intervals & next delivery date)

Price Breakdown

A clear breakdown of the final cost:

• Subtotal
• Shipping Costs
• Final Total, including tax details

Subscriptions

Users can manage active subscriptions directly in the Subscriptions section. A web component is integrated to handle subscription modifications. For more details, refer to the Subscriptions Guide.

Profile Settings

The Profile section allows users to manage their account details securely.

Personal Information

A personalized greeting with the user’s first name is displayed at the top.

Users can update:

• First Name & Last Name
• Gender (Dropdown: Male, Female, Diverse, Prefer not to say)
• Date of Birth

Validation & Saving

• Changes are validated in real-time and saved via updateShopUser.
• Users receive appropriate success/error notifications upon updating details.

Account Security & Password Management

Users can manage their password settings based on their authentication method.

Security Settings

This section allows users to:

• Change Password (if using email authentication).
• View Login Method (Email/Password or IDP Login).
• Manage Security Settings based on the authentication method in use.

The email address is non-editable for security reasons. Any changes require contacting support.

Customization Options

For developers and administrators looking to customize the Account Area, additional configuration options are available. For further details, refer to the Customization Guideline.