Customer Accounts

Customers can create accounts on your storefront to enjoy a personalized shopping experience. With an account, they can track orders, save shipping addresses, build a wishlist, and check out faster on future purchases.

Registration

New customers can create an account through a popup modal — there is no separate registration page to navigate to.

How to Register

1. Click the account icon in the store header (or the "Register" link in the mobile menu)
2. The registration modal appears as an overlay on the current page
3. Fill in the required fields:
   • Name — The customer's full name
   • Email — A valid email address (used for login and order notifications)
   • Password — A secure password
   • Confirm Password — Re-enter the password to confirm
4. Click Register

After successful registration:

• The customer is automatically logged in — no need to log in separately
• A welcome email is sent to their email address
• The modal closes and they can continue shopping right where they left off

TIP

Registration is quick and does not interrupt the shopping experience. Customers stay on the same page after registering, so they can continue browsing or go straight to checkout.

Login

Returning customers log in through the same popup modal system.

How to Log In

1. Click the account icon in the store header
2. The login modal appears
3. Enter their email address and password
4. Click Login

After logging in, the modal closes and the customer is back where they were. The header updates to show their account options.

Rate Limiting

For security, login attempts are limited to 5 per minute. If a customer enters incorrect credentials too many times, they will need to wait before trying again. This protects your store from unauthorized access attempts.

Switching Between Login and Register

The modal includes links to switch between login and registration modes. If a customer opens the login modal but does not have an account yet, they can click the "Register" link to switch to the registration form without closing the modal.

Forgot Password

If a customer forgets their password, they can reset it through a simple email-based flow.

How to Reset a Password

1. On the login modal, click "Forgot password?"
2. The customer is taken to the forgot password page at /forgot-password
3. Enter the email address associated with their account
4. Click Send Reset Link
5. A password reset email is sent with a secure link
6. Click the link in the email to open the reset password page at /reset-password
7. Enter a new password and confirm it
8. Click Reset Password

After resetting, the customer can log in with their new password.

Token Expiry

The password reset link expires after 60 minutes for security. If the customer does not use it in time, they will need to request a new one.

Order History

Logged-in customers can view all their past orders at /account/orders.

What Customers See

The order history page displays a list of all orders with:

• Order number — A unique reference for each order
• Date — When the order was placed
• Status — Current order status (Pending, Processing, Shipped, Delivered, Cancelled, etc.)
• Total — The total amount paid

Order Details

Clicking on any order opens the order detail view at /account/orders/{order-number}, which shows:

• All items in the order with images, names, variants, quantities, and prices
• Shipping address
• Payment method used
• Order status with timeline
• Tracking information (if provided by the store owner)

TIP

When you update an order's status or add tracking information in the admin panel, the customer can see these updates on their order detail page. They also receive an email notification about the status change.

Address Book

Customers can save and manage their shipping addresses at /account/addresses. Saved addresses make future checkouts faster since customers can select a saved address instead of typing it out again.

Managing Addresses

Customers can:

• Add a new address — Click the "Add Address" button and fill in the shipping details (name, phone, street address, city, state, postal code, country)
• Edit an existing address — Click the edit button on any saved address to update its details
• Delete an address — Remove addresses they no longer need
• Set a default address — Mark one address as the default, which is automatically pre-selected during checkout

TIP

Encourage customers to save their addresses so checkout is faster. The default address is automatically selected on the checkout page, reducing friction.

Wishlist

Customers can save products they are interested in to their wishlist for later. The wishlist page is available at /account/wishlist.

How the Wishlist Works

• Adding to wishlist — Customers click the heart icon on any product card (on category pages, homepage sections, or the product detail page) to add it to their wishlist
• Removing from wishlist — Clicking the heart icon again on a wishlisted product removes it
• Viewing the wishlist — Go to /account/wishlist from the account area to see all saved products
• Quick access — The wishlist is accessible from the account navigation in the header

The wishlist helps customers:

• Save products they want to buy later
• Compare products they are considering
• Keep track of items that are currently out of stock and check back later

TIP

The heart icon appears filled (solid) for products already in the wishlist and outlined (empty) for products not yet added. This gives customers instant visual feedback.

Login Required

The wishlist feature requires customers to be logged in. If a customer who is not logged in clicks the heart icon, they will be prompted to log in or register first.

Dark and Light Mode

Your storefront supports both dark and light visual modes, giving customers a comfortable browsing experience regardless of their preference.

How It Works

• Toggle switch — A sun/moon icon in the store header lets customers switch between modes with one click
• Persistent preference — The chosen mode is saved in the browser's local storage, so it persists between visits and page reloads
• System preference — If a customer has not manually set a preference, the storefront automatically follows their device's system setting (many phones and computers allow setting a system-wide dark or light preference)

Dark mode adjusts all colors across the storefront — backgrounds, text, cards, buttons, and navigation — for a cohesive look in both modes.

Account Navigation

When a customer is logged in, the account icon in the header provides access to:

• Order History — View past orders and track current ones
• Addresses — Manage saved shipping addresses
• Wishlist — View saved products
• Logout — Sign out of their account

On mobile, these options are available through the slide-out navigation menu.

Emails Your Customers Receive

Throughout their journey, customers receive the following email notifications (when email is configured):

Email	When It Is Sent
Welcome	Immediately after registration
Order Confirmation	After placing an order (COD or successful online payment)
Order Status Update	When you change an order's status in the admin panel (e.g., shipped with tracking info)
Password Reset	When they request a password reset

TIP

To ensure your customers receive these emails, make sure you have configured email (SMTP) settings during installation or in your hosting environment. Without email configured, notifications will not be delivered.

Next Steps

• Cart & Checkout — Review how the purchasing process works
• Storefront Overview — Return to the full storefront overview
• Settings — Configure store settings that affect the customer experience