Trelanto

Free shipping at CA$99.00 within Canada · A small number of remote areas are excluded

User Manaul

Frontend User Shopping Guide

Source check (2026-07-15): “Default” product search is relevance-first, but choosing price, sales, or newest makes that selected field the first ordering key. “My Orders” defaults to 15 rows, shows the creation time, and supports server-side status filtering plus status/time sorting; its anonymous state includes a login link that returns to /orders.

This guide is for shoppers on the Trelanto e-commerce platform. It helps you quickly understand and master all operations from registration and login to product browsing, checkout, and order management.

Table of Contents

  1. Account Operations
  2. Product Browsing and Search
  3. Product Details and Purchase
  4. Cart and Checkout
  5. Order Management
  6. Personal Center
  7. Shipping Address Management
  8. Product Favorites
  9. Operation Notes
  10. FAQ

1. Account Operations

1.1 Register an Account

The system uses phone number as the username for registration:

  1. Open the website homepage and navigate to the Register page:
    • Desktop: Click the user icon in the top right corner; select "Register" from the dropdown menu.
    • Mobile: Tap the hamburger menu icon (☰) in the top left corner; tap "Register" in the expanded sidebar.
  2. Fill in the following information:
    • Phone Number (required): Enter your phone number. The system validates the format in real time.
    • WeChat Nickname / WeChat Group: Shown only when enabled for the current tenant; max 50 characters when present.
  3. Click "Register" after confirming all information.
  4. After successful registration, the system will display your default password, which is the last 6 digits of your phone number. Remember this password and change it after your first login.

1.2 Login

  1. Navigate to the login page:
    • Desktop: Click the user icon in the top right corner; select "Login" from the dropdown menu.
    • Mobile: Tap the hamburger menu icon (☰) in the top left corner; tap "Login" in the expanded sidebar.
  2. Enter your username (the phone number used to register) and password.
  3. Click "Login".
  4. After a successful login, the page automatically redirects to the homepage or the page you were previously viewing.

Login security notes:

  • After 5 consecutive incorrect password attempts, your account will be locked for 30 minutes. You cannot log in during the lockout period.
  • You can try again after the lockout countdown ends.

1.3 Logout

  1. After logging in, open the user menu:
    • Desktop: Click the user avatar in the top right corner; select "Logout" from the dropdown menu.
    • Mobile: Tap the hamburger menu icon (☰) in the top left corner; tap "Logout" at the bottom of the expanded sidebar.
  2. The system clears your session and returns you to the homepage.

1.4 Change Password

  1. After logging in, go to "Personal Settings":
    • Desktop: Click the user avatar in the top right corner; select "Settings" from the dropdown menu.
    • Mobile: Tap the hamburger menu icon (☰) in the top left corner; tap "Settings" in the sidebar.
  2. Switch to the "Password" tab.
  3. Enter your current password and new password (minimum 6 characters).
  4. Confirm the new password and click "Save".
  5. After a successful password change, all logged-in sessions across devices are invalidated; you must log in again with your new password.

2.1 Homepage Browsing

The homepage features the following sections:

  • Carousel Area: Displays platform-recommended activities, promotions, or new arrivals. The carousel auto-scrolls; use the left/right arrows to switch manually. Supports swipe gestures on mobile.
  • Homepage Sections: Product recommendation areas configured by operations staff. Each section may display products with different themes (e.g., "Hot Picks", "New Arrivals"). Sections display product cards in a grid layout.
  • Recommended Products: If no products are configured in homepage sections, the system automatically shows the latest listed products as a fallback.

2.2 Category Navigation

  1. Product category entries are in the top navigation bar.
  2. The system supports multi-level categories (tree structure); clicking a top-level category expands sub-categories.
  3. Clicking a specific category displays all products in that category.
  4. Category pages show breadcrumb navigation to help you understand your current level and navigate quickly back to parent categories.

2.3 Brand Navigation

  1. Browse all brands via the brand page.
  2. Clicking a brand displays all products under it.
  3. Brand pages also include breadcrumb navigation.

2.4 Search Products

  1. Find the search box at the top of the page (available on both desktop and mobile).
  2. Enter a keyword (product name, brand, description, etc.).
  3. As you type, the system shows autocomplete suggestions — click a suggestion for a quick search.
  4. Press Enter or click the search button to navigate to the search results page.
  5. The results page provides the following filter and sort options:
    • Sort: Default, price low to high, price high to low, newest, bestselling.
    • Price filter: Select preset price ranges (e.g., $0–49, $50–99, $100–199) or enter a custom min/max price.
    • Brand filter: Check one or more brands to filter results.
    • In-stock filter: Check "In Stock Only" to exclude out-of-stock products.
    • Attribute filter: Further filter by product attributes (e.g., color, size).
  6. Search results support infinite scroll — scrolling down automatically loads more products.

2.5 Hot Searches

  • Hot search terms are displayed below the search box, helping you quickly find trending products.
  • Hot search terms are automatically generated based on platform-wide search frequency.

3. Product Details and Purchase

3.1 Viewing Product Details

  1. Click any product card on the homepage, category page, search results page, or brand page.
  2. The system navigates to the product detail page using the product's slug (URL-friendly name).
  3. The product detail page includes:
    • Product Images: Multi-image browsing; swipe left/right to see different angles. The system shows a product image gallery with thumbnail navigation.
    • Title and Subtitle: Main title and supplementary description.
    • Pricing: Current selling price; original (strikethrough) price shown if available.
    • Tags: Labels such as "New", "Hot", "Limited Time Offer".
    • Attributes: Detailed parameters like color, size, material.
    • Description: Detailed product description text.
    • Product Status: Shows whether the product is purchasable; market-test, coming-soon, preorder, discontinued, or out-of-stock products display their corresponding state.
    • SKU: Unique product stock number.

3.2 Breadcrumb Navigation

  • The product detail page includes breadcrumb navigation at the top showing the path from the homepage to the current product (e.g., Home > Category > Product Name).
  • Click any breadcrumb level to navigate quickly to that page.

3.3 Add to Cart

  1. Confirm the product details on the product page.
  2. Select the quantity (if applicable).
  3. Click "Add to Cart".
  4. The product is added to your cart; the cart icon in the top right updates the item count.

3.4 Favorite a Product

  1. Find the Favorite button (heart icon) on the product detail page.
  2. Click to add the product to your favorites list.
  3. Click again to unfavorite (toggle).
  4. The favorites feature requires you to be logged in.

3.5 New-Arrival and Arrival Follows

Some products are not immediately purchasable because they are being tested as potential new arrivals or announced before stock is available:

  • Wanted: Usually appears on market-test or potential-new-arrival products. Clicking it records your interest, which merchants can review in product market research.
  • Follow arrival: Usually appears on coming-soon or waiting-for-stock products. Clicking it records an arrival follow.
  • Wanted / Following: Indicates that your follow is currently active; you can click again to cancel it.
  • New Arrival Follows page: After logging in, open "New Arrival Follows" from the user menu to view or cancel followed products.

These follow actions are not orders and do not reserve inventory. They help merchants evaluate stocking, publishing, or replenishment priority. Product detail views, effective views, variant selections, favorites, and add-to-cart actions are also aggregated as product research signals in the admin backend.

4. Cart and Checkout

4.1 View Cart

  1. Click the cart icon in the top right to go to the cart page.
  2. The cart icon displays the current number of items.
  3. The cart page shows:
    • Title, price, and quantity for each item.
    • Subtotal price per item (unit price × quantity).
    • Total price for all items.

4.2 Modify Cart

  • Change quantity: Adjust the quantity in the input field next to the item.
  • Remove item: Click the delete button next to the item.
  • Clear cart: Click "Clear Cart" to remove all items at once.

4.3 Cart Merging

  • If you added items to the local cart while logged out, the system automatically merges the local cart with your account cart when you log in.
  • If the same product already exists in both carts, the quantities are combined.

4.4 Proceed to Checkout

  1. Confirm your items and quantities in the cart and click "Checkout".
  2. The system switches to the checkout page.

4.5 Filling in Checkout Information

The checkout consists of four steps (Stepper component switches between steps on a single page):

  1. Fulfillment Method and Address / Pickup Contact: If the merchant enables local pickup, choose shipping or local pickup. Shipping requires recipient name, phone, street address, city, province, postal code, etc.; local pickup requires pickup contact name and phone and has no shipping fee. Shipping address supports Google Places autocomplete.
  2. Billing Information: View shipping cost or local-pickup 0 shipping, tax breakdown, and choose whether billing address is the same as shipping.
  3. Payment Method: Depending on tenant configuration, choose PayPal, Interac e-Transfer, or Stripe card/digital wallet. Switching methods triggers a new price calculation. A storefront that supports coupons also shows the coupon input here.
  4. Order Confirmation: Final review of all information (shipping or pickup details, payment, coupon discount if any, cost summary). Click "Place Order" to submit.

Coupons are validated again when you submit the order. If valid, the coupon is first reserved for that order; it is counted as used only after payment is confirmed. If a PayPal payment remains unresolved for too long, the system cancels the expired reserved order and releases the coupon reservation.

For the detailed checkout flow, see User Guide: Checkout Process.

4.6 Submit Order

  1. On "Step 4: Order Confirmation", click "Place Order" after verifying all information.
  2. Based on your selected payment method:
    • PayPal: The system creates the order and redirects to the PayPal payment page.
    • Interac e-Transfer: The system creates the order and redirects to the transfer instructions page with recipient email and exact transfer amount.
    • Card or digital wallet: The system creates a Stripe payment attempt and displays eligible card, Apple Pay, or Google Pay controls; fulfillment waits for server confirmation.

4.7 Guest Checkout

  • Guest checkout is supported, with behavior selected by the current tenant.
  • CN uses a phone-based auto-account flow. CA/TRELANTO submit the local cart plus a valid contact email and do not create an account.
  • Guest checkout may require completing a bot verification (Turnstile challenge) to prevent abuse.
  • Guest checkout uses IP, phone, and device rate limits; Turnstile is requested only after configured thresholds are exceeded.

5. Order Management

5.1 View My Orders

  1. After logging in, navigate to "My Orders":
    • Desktop: Click the user avatar in the top right; select "My Orders" from the dropdown menu.
    • Mobile: Tap the hamburger menu icon (☰) in the top left; tap "My Orders" in the sidebar.
  2. The system shows all your historical orders in a table.
  3. The list displays:
    • Order number
    • Order time
    • Order status
    • Order amount
    • Action buttons

5.2 Order Status Explanation

StatusDescription
createdOrder created, awaiting payment
payment_pendingPayment submitted, awaiting confirmation
paidPayment confirmed, awaiting shipment
fulfillment_queuedAdded to fulfillment queue
shippedItems shipped
in_transitItems in transit
deliveredItems received
payment_failedPayment failed (can retry)
cancelledOrder cancelled
refundedOrder refunded

5.3 View Order Details

  1. Click an order in the order list to open the detail page.
  2. The detail page shows:
    • Order number and status
    • Order time
    • Shipping address
    • Each item's name, quantity, unit price, and subtotal
    • Shipping fee
    • Order total
    • Order note

5.4 Order Sorting and Filtering

  • Sort by order time (ascending/descending).
  • Filter by order status (e.g., only show pending or completed orders).
  • Pagination is supported with 15 orders per page by default and 30/50-row alternatives.

6. Personal Center

6.1 Accessing Personal Settings

  1. After logging in, open the user menu to access personal settings:
    • Desktop: Click the user avatar in the top right corner; select "Settings" from the dropdown menu.
    • Mobile: Tap the hamburger menu icon (☰) in the top left corner; tap "Settings" in the sidebar.

6.2 Profile Section

The personal settings page has two main sections: profile and password:

  • View Personal Info: Shows your username, email (read-only), and other basic info.
  • Edit Profile: You can modify username, avatar style and seed (DiceBear random avatar), plus any profile fields the current tenant allows users to edit. Phone number, WeChat nickname, and WeChat group visibility, requirement, and user editability are controlled by tenant static configuration.
  • Click Save after making changes.
  • You cannot edit your profile if your account is disabled or deleted.

6.3 Password Section

  • Provides a password change feature.
  • Requires entering the current password and new password.
  • New password must be at least 6 characters.
  • Supports password visibility toggle (click the eye icon to show/hide).

6.4 Preferences

  • Language and theme are global storefront preferences and no longer have a dedicated tab on the personal settings page.
  • For details on language switching and theme switching, see the Frontend User System Features Guide.

7. Shipping Address Management

7.1 View Address List

  1. Go to the "Address Management" page:
    • Desktop: Click the user avatar in the top right; select "Address Management" from the dropdown menu.
    • Mobile: Tap the hamburger menu icon (☰) in the top left; tap "Address Management" in the sidebar.
  2. All your saved shipping addresses are listed.
  3. Each address shows: recipient name, phone, province/city/district, detailed address, and whether it is the default address.

7.2 Add a New Address

  1. Click "Add Address".
  2. Fill in recipient name, phone, select province/city/district, and enter the detailed address.
  3. Click "Save".

7.3 Edit an Address

  1. Find the address to modify in the list.
  2. Click the "Edit" button next to it.
  3. Modify the relevant information and click "Save".

7.4 Delete an Address

  1. Find the address to delete.
  2. Click "Delete".
  3. After confirming, the address is permanently removed.

7.5 Set Default Address

  1. Find the address to set as default.
  2. Click "Set as Default".
  3. After setting, this address will auto-fill during checkout.
  4. Each user can have only one default address; setting a new default automatically un-sets the previous one.

8. Product Favorites

8.1 View Favorites List

  1. After logging in, go to "My Favorites".
  2. Your favorited products are displayed in a paginated list.
  3. Default 20 products per page; turn pages to see more.

8.2 Add to Favorites

  • Click the Favorite button (heart icon) on the product detail page.
  • Or use the toggle favorite feature for a one-click add/remove.

8.3 Remove from Favorites

  • Click the "Unfavorite" button next to an item in the favorites list.
  • Or click the Favorite button again on the product detail page.

8.4 Check Favorite Status

  • When you open a product detail page, the system automatically checks whether the product is already favorited.
  • Favorited products show a filled heart icon; unfavorited products show an outlined heart icon.

9. Operation Notes

9.1 Account Security

  • Change your default password as soon as possible after registering (default: last 6 digits of phone number) to prevent unauthorized access.
  • After changing your password, all logged-in sessions across devices are invalidated; re-login with the new password.
  • Avoid leaving yourself logged in on public devices; log out after use.
  • After 5 consecutive incorrect password attempts, the account is locked for 30 minutes. Make sure you have the correct password before logging in.

9.2 Shopping Operations

  • Products in the cart do not reserve inventory; confirm that stock is available before placing the order.
  • Do not click the submit button multiple times when submitting an order; this may create duplicate orders.
  • Carefully verify the shipping address and phone number at checkout to ensure accurate delivery.
  • Use the order note field for valid delivery or product instructions.

9.3 Search Tips

  • Using specific keywords yields more precise results.
  • Use the filter function to narrow your search, especially price range and brand filters.
  • Hot search terms can help you quickly discover popular products.

9.4 Network and Device

  • A stable network connection is recommended for shopping operations to avoid order anomalies.
  • The platform supports both desktop and mobile browsers; the mobile interface is optimized.
  • Use modern browsers (latest versions of Chrome, Firefox, Safari, Edge) for the best experience.

10. FAQ

Q1: Registration says "Incorrect phone number format"?

The system requires valid phone number format. Please confirm the format matches your region's requirements. Make sure the number you entered is correct.

Q2: Forgot my password?

Click "Forgot password?" on the login page and enter your registered email address. The system sends an account recovery email; the recovery link is valid for 1 hour and can be used only once. If you request too many links in a short period, the account recovery rate limit may ask you to try again later.

Q3: Why has my account been disabled?

Admin can disable user accounts. A disabled account cannot log in. If your account is disabled, contact the platform admin to understand why and to request restoration.

Q4: Cart items disappeared?

Cart data is stored under your account. Items added while logged out are saved locally in the browser and may be lost after clearing browser data or switching devices. It is recommended to use the cart while logged in.

Q5: Can I cancel an order after submitting it?

Order cancellations require contacting merchant customer service. Cancellation policies vary by status:

  • Orders in created or payment_pending status can usually be cancelled directly.
  • Orders in paid or shipped status may require going through the refund process.

Q6: Can't find the product I'm looking for?

  • Try different keywords.
  • Reduce filter conditions to broaden the search.
  • Clear price and brand filters and search again.
  • Check whether the "In Stock Only" filter is enabled; the product may be temporarily out of stock.

Q7: Can guests place orders?

Yes. CN creates an account from the submitted phone number. CA/TRELANTO create an accountless order from the local cart and contact email. An accountless order does not appear automatically in “My Orders”; the current browser uses an order-specific access cookie to continue payment. Both flows have IP, phone, and device abuse limits.

Q8: The page is showing in the wrong language — how do I switch?

The top navigation bar or settings provide a language switch. The platform currently supports Chinese, English, and French. Click the language switch button to change. For detailed steps, see the Frontend User System Features Guide.

Q9: How do I view all products from a specific brand?

Browse via the brand page — click the brand name to enter the brand section and view all products. Brand filtering is also available on search results pages.

Q10: What are the address requirements?

Shipping addresses must include complete province, city, district, and detailed address information. Phone number must match the required format. Setting a default address is recommended so it auto-fills during checkout, saving time.

Sections