Frontend User System Features Guide

Source check (2026-07-15): while the support widget is closed, it no longer queries whether anonymous sessions can be claimed, and signing in never opens a blocking claim dialog automatically. The confirmation appears only after the user opens support, enters the session-history panel, and explicitly requests the claim; the API still validates both the former visitor identity and current account.

This guide is for shoppers on the Trelanto e-commerce platform. It helps you understand and use platform system features including multilingual switching, theme switching, mobile-responsive design, activity pages, and more.

---

Table of Contents

1. Multilingual Switching
2. Theme Switching
3. Mobile Adaptation and Usage
4. Activity Pages
5. Page Navigation System
6. Footer Information and Content Pages
7. Online Support and Messages
8. Session Management
9. Operation Notes
10. FAQ

---

1. Multilingual Switching

1.1 Supported Languages

The system currently supports three languages:

The default language depends on the tenant configuration; users can switch to any available language at any time.

1.2 Method 1: Via the User Menu (Desktop)

1. Click the user avatar in the top right to expand the dropdown menu.
2. The dropdown includes a language switch option (embedded as a menu item).
3. Click that option to open the language list; the currently selected language shows a checkmark (✓).
4. Click the target language to switch immediately.
5. The page updates to the selected language's content.

1.3 Method 2: Via the Sidebar (Mobile)

1. Tap the hamburger menu icon (☰) in the top left to expand the left sidebar.
2. The sidebar includes a language switch option.
3. Tap that option to open the language list and make your selection.

1.4 Language Setting Persistence

• The system saves your language preference via a browser cookie named NEXT_LOCALE.
• The cookie is valid for one year; during this period every visit automatically uses your last selected language.
• Clearing browser cookies resets the language to the current tenant's configured default.

1.5 Multilingual Content Coverage

The following content changes when you switch languages:

• Navigation bar, buttons, tooltips, and other interface elements.
• Product titles, descriptions, and attribute information (if the merchant has configured multilingual translations).
• Category names and descriptions.
• Homepage section titles.
• Carousel titles and subtitle text.
• Activity page titles and descriptions.
• Footer section titles and link text.
• Search suggestions and hot search terms (returns content for the corresponding language).

Note: If a product or piece of content does not have a translation in the target language, the system falls back to displaying content in the other language (e.g., showing Chinese if English is missing, and vice versa). This is not a system error — it reflects the scope of content translation coverage.

The online support entry and support conversation copy also support Chinese, English, and French. Logged-in support conversations are linked to the account; guest conversations are linked by a browser visitor identifier.

---

2. Theme Switching

2.1 Supported Theme Modes

The system supports three theme modes:

2.2 Method 1: Via the User Menu (Desktop)

1. Reopen the top-right user dropdown used by the language switcher.
2. The dropdown includes a theme switch option (embedded as a menu item).
3. Click that option to display the theme selection menu; the menu lists three modes (Light, Dark, System) and the currently selected mode shows a checkmark.
4. Click the target mode to apply immediately.
5. The page applies the new theme style instantly.

2.3 Method 2: Via the Sidebar (Mobile)

1. On mobile, reopen the left sidebar from the hamburger icon.
2. The sidebar includes a theme switch option.
3. Tap it to display the theme selection menu.

2.4 Theme Setting Persistence

• The system saves your theme preference via a browser cookie named theme.
• The cookie is valid for one year.
• When switching themes, the system also updates the class attribute on the HTML root element to apply styles immediately.
• When "System" mode is selected, the system detects your OS preference (via the CSS media query prefers-color-scheme) and applies the matching theme automatically.

2.5 What Theme Affects

Theme switching uniformly changes the color scheme for:

• Page background and text colors.
• Navigation bar and sidebar colors.
• Buttons, inputs, cards, and other component styles.
• Icon colors.
• Scrollbars, dividers, and other auxiliary elements.

---

3. Mobile Adaptation and Usage

3.1 Responsive Layout

The platform uses responsive design that automatically adjusts layout based on screen size:

3.2 Mobile-Specific Interface

When accessing on mobile (screen width below 900px), the following interface elements change:

1. Top Navigation Bar (mobile layout, left to right):

   • Height becomes 52px (64px on desktop).
   • Left: Hamburger menu icon (☰) — tap to expand the left sidebar, which contains all navigation and feature entries.
   • Center: Search box, always visible inline so you can type keywords directly.
   • Right: Admin panel icon (admins only), Home shortcut icon, and Cart icon.

2. Left Sidebar (Drawer):

   • Slides in from the left when the hamburger icon is tapped.
   • Contains: user info / login entry, product categories, My Orders, My Favorites, My Reviews, Address Management (based on tenant config), language switch, theme switch, settings, and logout.
   • On desktop (≥900px), there is no hamburger menu — all functions are accessed through the user avatar dropdown in the top right.

3. Navigation Shortcut Buttons:

   • Sub-pages such as orders, favorites, addresses, and settings show "Go Back" and "Go Home" shortcut buttons at the top of the page content.
   • Displayed on both desktop and mobile for quick navigation.

4. Carousel:

   • On mobile, dedicated mobile banner images are automatically used (if configured by the merchant).
   • Carousel aspect ratio switches from 21:9 (desktop) to 16:9 (mobile).
   • Supports swipe gestures.

5. Product List:

   • Product grid adjusts from multiple columns to one or two columns.
   • Product card sizes automatically adapt to screen width.

6. Search Page:

   • The filter panel slides up as a bottom drawer instead of a sidebar.
   • Infinite scroll is also supported in search results.

3.3 Touch Gestures

• The carousel supports left/right swipe gestures.
• The product detail image gallery supports touch gestures.
• List pages support pull-to-scroll for loading more content.

3.4 Accessing on Mobile

• Visit the website URL directly in your mobile browser.
• No app installation required.
• Recommended browsers: Chrome, Safari, or Edge (mobile versions).

---

4. Activity Pages

4.1 What Are Activity Pages

Activity pages are promotional or themed pages published by the platform's operations team. Each activity page includes:

• Activity title and subtitle
• Activity banner image (desktop and mobile may use different images)
• Activity description (supports rich text)
• Content images (displayed in order)
• Activity start and end times

4.2 Accessing Activities

1. From the homepage: Carousel images or recommendation sections may link to activity pages; click to navigate.
2. Via a direct link: Activity page URLs follow the format /activities/{slug}, e.g., /activities/spring-sale.
3. Once on the activity page, you can view the full activity information and images.

4.3 Activity Status

• Active: The activity is currently valid; all content is displayed.
• Expired: After the activity ends, the page shows an "Activity has ended" notice with the end date. Expired activity pages remain accessible but are clearly marked as expired.
• Not Found: If an activity does not exist or the slug is incorrect, the page shows a friendly message.

4.4 Activity Page Actions

• View activity details, banner images, and content images.
• Read activity descriptions and participation rules.
• Follow the activity instructions (e.g., navigate to specified product pages).

---

5. Page Navigation System

5.1 Top Navigation Bar

The top navigation bar is the primary navigation entry point for the entire website. Its layout differs by device:

Desktop (≥900px) top navigation bar (left to right):

1. Site Logo: Click to return to the homepage.
2. Category Navigation: Displays the product category tree with multi-level expansion.
3. Search Box: Enter keywords to search for products.
4. Admin Panel Icon (only visible to users with admin:access permission): Click to enter the admin panel.
5. User Avatar: Always visible (shows a person icon when not logged in); click to expand the user dropdown menu (includes login/register, orders, favorites, settings, language switch, theme switch, etc.).
6. Cart Icon: Shows the number of items in the cart; click to go to the cart page.

Mobile (<900px) top navigation bar (left to right):

1. Hamburger Menu Icon (☰): Tap to expand the left sidebar, which contains all navigation and feature entries.
2. Search Box: Always visible inline; type keywords directly.
3. Admin Panel Icon (only visible to users with admin:access permission): Tap to enter the admin panel.
4. Home Icon: Tap to quickly return to the homepage.
5. Cart Icon: Shows the number of items in the cart; tap to go to the cart page.

5.2 User Menu (Desktop Dropdown / Mobile Sidebar)

Desktop: Click the user avatar in the top right to expand the dropdown menu.
Mobile: Tap the hamburger icon (☰) in the top left to expand the left sidebar.
Both contain the following entries (full functionality requires login):

Note: The "Admin Panel" entry is not inside the user dropdown menu. It is a separate shield icon button in the top navigation bar (visible to both desktop and mobile on the right side of the nav), and only appears for users with admin:access permission.

5.3 Breadcrumb Navigation

Breadcrumb navigation appears on the following pages:

• Product detail: Home > Category Name > Product Name
• Category page: Home > Top-level Category > Sub-category
• Brand page: Home > Brand Name
• Search results: Home > Search Results

Click any breadcrumb level to quickly return to that page.

5.4 Smart Sticky Header

• The navigation bar uses smart sticky positioning: it automatically hides when scrolling down and reappears when scrolling up.
• This design maximizes the content display area on mobile while keeping navigation accessible.
• After scrolling more than 10px, a shadow is added to the navigation bar to visually separate it from the page content.

---

6. Footer Information and Content Pages

6.1 Footer Structure

The footer at the bottom of every page contains:

• Links organized into groups (e.g., "About Us", "Customer Service", "Help Center").
• Each group contains multiple links to corresponding content pages.
• Contact & Follow entries (email, social/messaging links, QR popups, etc.).
• Copyright and registration information.

6.2 CMS Content Pages

Footer links may point to platform-managed content pages, such as:

• About Us
• Privacy Policy
• Terms of Service
• Return and Exchange Policy
• FAQ

These pages follow the URL format /p/{slug} (e.g. /en/p/terms-of-service). Their content is configured and maintained by platform operations staff.

6.3 Viewing Content Pages

1. Click a footer link to navigate to the corresponding content page.
2. Content pages support multiple languages and display the version matching your current language setting.
3. Pages support rich-text format and may include text, images, and other content.

---

7. Online Support and Messages

7.1 Entry and Identity

The storefront provides an online support entry with copy matching the current language. Conversations created by logged-in users are bound to their account; guest users create visitor conversations through a browser visitor identifier. Users can describe order, product, payment, or delivery issues, and the messages appear in the admin support workspace.

7.2 Email and Online Messages

The support system supports both online messages and email replies. Staff handle conversations at /admin/support. When staff reply by email, the message contains a conversation token; customer replies can return to the same support conversation. Order confirmation email also prefers the support reply address, making order-related follow-up easier.

7.3 Attachments and Order Links

Support conversations can be linked to orders for operational context. Attachment download still checks whether the current visitor, user, or staff member can access the conversation; attachment IDs cannot be used to cross conversation boundaries.

---

8. Session Management

8.1 Login Session

After logging in, the system creates a session. Changing your password invalidates all sessions across all devices; you must log in again with your new password.

8.2 Automatic Token Refresh

• The system uses an Access Token and Refresh Token mechanism to maintain your login state.
• The Access Token has a short expiry; before it expires, the system automatically uses the Refresh Token to obtain a new Access Token — no manual action needed.
• If the Refresh Token also expires, the system prompts you to log in again.

---

9. Operation Notes

9.1 Language Switching

• The page refreshes immediately to show content in the new language after switching.
• Product content multilingual support depends on whether the merchant has configured translations. Content without translations falls back to the alternative language.
• Language preferences are stored in cookies. Using private/incognito mode or clearing cookies requires re-setting the language.

9.2 Theme Switching

• Selecting "System" mode means the website theme automatically follows your OS dark/light mode changes.
• Theme switching does not affect page content — only the visual style changes.
• Some images may have slightly lower contrast against the background in dark mode; this is normal.

9.3 Mobile Usage

• Portrait orientation is recommended on mobile for the best experience.
• Some complex filter operations are presented as drawers on mobile, offering the same functionality with adjusted interactions.
• If the page displays abnormally, try refreshing or clearing the browser cache.

9.4 Activity Pages

• Activities have defined start and end times; pages remain accessible after expiry but are marked as ended.
• Activity offers and rules are governed by the activity page description.
• Some activities may require login to participate.

---

10. FAQ

Q1: After switching language, some content didn't change and still shows the original language?

The target language translation for that content has not been configured. The system uses the alternative language as a fallback. For example, after switching to English, if a product only has Chinese content configured, it still displays Chinese. This is not a system error — it reflects the translation coverage of the content.

Q2: Some elements are hard to read in dark mode?

Try switching to light mode. If the problem persists, certain content (such as images uploaded by operations staff) may not be dark-mode optimized. Consider reporting this to platform customer service.

Q3: Pages load very slowly on mobile?

• Check whether your network connection is stable.
• Try closing other apps consuming bandwidth.
• Clear the browser cache and try accessing again.
• Using a Wi-Fi network is recommended for heavy browsing.

Q4: Can't find the filter button on mobile?

On mobile, the filter feature on the search results page appears as a button. Click the filter button on the page, and the filter panel slides up from the bottom (drawer style) where you can configure price ranges, brands, attributes, and other filter conditions.

Q5: What does "Activity has ended" mean on an activity page?

The activity's validity period has passed. The operations team set an end time for the activity, and the current time has exceeded it. The page displays the specific end date and time for your reference.

Q6: How can I save a search query or filter results?

The system does not currently support saving search conditions. However, the search results page URL includes the search keyword as a query parameter (e.g., ?q=keyword). You can bookmark that URL for quick access next time.

Q7: A footer content page won't open?

• Check that the link is correct.
• The content page may not yet be configured or may have been taken offline; contact customer service for more information.
• Try switching to another language to see if content is available.

Q8: How do I quickly access the admin panel from the frontend?

If your account has admin permission (admin:access), a dedicated "Admin Panel" icon button (shield icon) appears in the top navigation bar after logging in. On desktop it is displayed to the left of the user avatar (top right area); on mobile it also appears in the top navigation bar on the right side. Click or tap the icon to enter the admin panel — the system automatically navigates to the first admin page you have permission to access. Regular users will not see this icon.

Q9: Why do hot search terms change after switching language?

Hot search terms are tracked per language. Chinese-environment hot searches, English-environment hot searches, and French-environment hot searches are calculated independently. Switching language naturally displays the hot search content for the corresponding language.

Q10: The page theme doesn't match my OS theme?

Check whether the theme setting is "System" mode. If the theme is fixed to Light or Dark, the page will not follow OS theme changes. Switch the theme to "System" to keep the website theme in sync with your OS.