Storefront User System Features Guide

This guide covers the shared features of the Trelanto storefront: language, theme, responsive navigation, activity pages, the footer and public content pages, online support, and login sessions. Product browsing, checkout, payment, and account-security behavior are described in their own user guides. Here, follow the visible controls and recovery steps available on the current page.

What appears can vary with the current site's settings, screen size, sign-in state, and published content. The controls actually shown by the page are the authoritative user-facing behavior.

---

1. Page structure and scope

1.1 Shared storefront areas

Storefront pages normally contain four shared areas:

These features work in the browser without a separate application. The layout is designed for at least 360px; a narrower viewport can leave too little horizontal space without meaning that content was lost.

1.2 Site settings and sign-in state

Site settings control activities, carousels, footer groups, and some account fields. Signing in makes account entries such as orders, favorites, and settings available. A control that is not shown on the current page is not available in that context.

Public pages can be opened while signed out. After signing in, language and theme choices are retained for the account. Support also changes from visitor use to account use, but visitor history is not moved automatically; the claim flow is described in section 8.

2. Interface language and translated content

2.1 Supported languages and defaults

The current route and interface messages support three languages:

The current site can change its default. A page address may carry the active language, and the header or mobile-drawer language switcher opens the current page in the language you choose. A page without an explicit language marker uses the signed-in account preference when available and otherwise follows the current site default.

2.2 Where to change it

On desktop, open the avatar menu in the upper-right corner, expand Language, and choose Chinese, English, or French. On mobile, open the menu button in the upper-left corner, expand Language in the navigation drawer, and select a language. Signed-in users can also change the interface language in the preferences section of Personal Settings.

After a successful change, the page keeps the current search parameters and page fragment. If saving the choice fails, navigation does not proceed; keep the page open and retry.

2.3 How the choice is retained

• While signed out, the language is retained as a preference for the current site.
• While signed in, the selection is retained with the account for later visits.
• Clearing site data returns to the current site's default until a new choice is made.
• Private browsing may remove the preference when the window closes, so the language may need to be selected again.

2.4 What is translated

Navigation, controls, and error messages use the active language. Product, category, brand, homepage, carousel, activity, and footer titles depend on the translations available for that language; a missing translation can leave a title empty or use the site's configured fallback.

Content pages use the available title and body for the selected language. Search suggestions show products, categories, brands, and search terms in the active language; the storefront does not expose a separate “hot searches” section.

The AI Shopping Assistant also uses the active site language and supports Chinese, English, and French answers. Recommendation cards prefer catalog translations for that language, whose completeness depends on the product information.

3. Light, dark, and system themes

3.1 Three modes

On desktop, expand Theme in the avatar menu. On mobile, expand Theme in the navigation drawer. Signed-in users can also change it in Personal Settings. A successful selection updates the page without requiring the current form to be submitted again.

3.2 Retention and initial display

For signed-out visitors, the theme is retained as a preference for the current site. The site default and the browser's color preference determine the initial mode when no choice has been made. A signed-in account preference takes priority. System mode follows later operating-system changes; a fixed light or dark choice does not.

3.3 What the theme changes

The theme changes the colors of the background, text, navigation, forms, cards, buttons, icons, and dividers. It does not change products, prices, inventory, orders, or language. Uploaded images keep their original appearance; if an image has poor contrast in dark mode, switch to light mode and report the page and image location to support.

4. Responsive navigation, search, and accessibility

4.1 Desktop and mobile headers

The storefront changes its header layout at about 900px:

The mobile drawer contains the category tree. A parent with children is expanded before “view all” or a child category can be selected. When signed in, it can also show orders, favorites, product interests, reviews, an address entry when the site requires it, settings, and logout. When signed out it shows registration and login. The desktop avatar menu contains the account entries; categories remain in the separate category navigation.

Whether the header hides while scrolling can be configured per screen size. When enabled, scrolling down by more than about 10px hides it and scrolling up shows it again. A header that stays visible is valid behavior.

The cart button shows the current item count on desktop and mobile, with the badge capped visually at 99. After the scroll threshold, a header that remains visible gains a shadow to separate it from the page body.

4.2 Search, filters, and breadcrumbs

The header search is available on desktop and mobile. On a small search-results screen, sorting is placed in a menu and filters open in a drawer from the right. Price, brand, stock, and product-property changes remain draft filter values until Apply updates the results.

Search, category, brand, and product pages provide breadcrumbs according to their available context. Product details try to retain whether the visitor came from home, a category, a brand, search, favorites, or the cart so that the breadcrumb leads back to a meaningful place. Browser Back restores the address, but does not promise to restore every previously loaded result or the exact scroll position.

4.3 Keyboard and readable content

• Language, theme, account, and category controls have accessible names; search suggestions support Arrow keys, Enter, and Escape.
• Buttons and forms rearrange at small widths. Product-grid column counts depend on the current module and screen size; the storefront does not promise one column on every phone.
• The homepage carousel has previous/next controls and dots, can autoplay, and pauses on pointer hover. Touch swipe is not guaranteed. The product-detail gallery supports horizontal image changes at base zoom, two-finger zoom, and one-finger panning after zooming in.
• The carousel ratio comes from the site's display settings and can default to 21:9; it does not automatically use another ratio solely because the viewport is mobile. A configured mobile image is preferred.
• A content-page chapter outline is shown as a scrollable list on wider phones and desktops and is hidden on extra-small phones. Content images have zoom, unzoom, and reset controls. Wide tables can scroll horizontally.

5. Activities and promotional pages

5.1 Public conditions and entry

Activities are normally reached from a homepage carousel or a site link that opens the activity detail page. The page is available only when the current site has activities enabled and the activity is within its public time range; the site link supplies the activity address, so visitors do not need to construct it.

An activity can contain a translated title, subtitle, rich description, desktop and mobile banners, ordered content images, labels, start/end times, and an optional Learn more link. There is no generic sign-up, coupon-claim, or participation button; the description or link explains any next action.

5.2 Display

The mobile banner is preferred and falls back to the desktop banner when absent. The activity-detail banner uses 16:9 on extra-small screens and 21:9 from the desktop breakpoint; those ratios belong to the activity detail and are not the homepage carousel rule. Content images follow the order configured for the activity, and an image that cannot load uses a placeholder.

When Learn more is configured, the target opens in a new tab. The target page applies its own content, offer, price, and sign-in rules; an activity description does not change those rules.

5.3 Ended, not started, or unavailable

Activities that are not yet public, have ended, or are unavailable at the current site use the same ended/unavailable page and return to the home page. The page may not distinguish the exact reason. If an activity crosses its end time while open, the page can additionally show the known end time.

Other loading failures are shown as a load failure rather than being labeled as an ended activity. If an old bookmark shows the generic state, retry from the current homepage; give support the complete page address when the reason must be investigated.

6. Footer and public content pages

6.1 Footer contents

The footer can show, independently by screen size:

• content-page links grouped into sections;
• merchant address, support email, and phone;
• social or messaging links, including a configured QR popup with account name and description;
• localized copyright text; and
• legal links such as privacy policy and terms of use.

The footer, each group, each link, merchant details, contact/follow items, and copyright can be shown or hidden independently. An empty group is not rendered. Select a visible normal content link in the footer to open its public content page; a WeChat link opens the configured QR code instead of navigating to a content page.

6.2 Content-page behavior

Open a public content page from a visible footer link or a site-content link that the current page provides. The linked page must exist and be enabled; otherwise the result is Not Found. A page can provide a title and rich body for the current language, including headings, paragraphs, lists, links, quotes, tables, images, brand information, pickup details, and support contacts.

If page content cannot be loaded, the page shows an error instead of inventing default prose. Failed images use a placeholder, while the destination of an external link remains responsible for its own behavior.

6.3 Chapter outline and shipping information

Headings in the page create the chapter outline. Scrolling highlights the current chapter, selecting an item moves to that section, and a back-to-top control is available.

Some content pages add the current site's delivery countries or regions, pricing mode, estimated days, free-shipping threshold, and postal-code exclusions. These values come from the active shipping settings; the quote shown during checkout remains authoritative for the current order.

6.4 Footer and page failures

When the footer is unavailable, disabled, or hidden at the current screen size, the page keeps a compact legal footer containing visible “Privacy Policy” and “Terms of Use” links. Those links can still be Not Found when the corresponding pages are not enabled.

An unknown content page is Not Found. Other loading failures use a dedicated error page with a home link and no in-page retry. Refresh once and re-enter from the footer; if the error persists, provide the current language, footer-link label or page title, and visible error to support.

7. Online support, messages, and attachments

7.1 Opening support and establishing ownership

The message button in the lower-right corner opens the support drawer. Below 768px it becomes a full-screen drawer; on wider screens it is a right-side chat panel, with the history panel able to open on its left. Widget text follows the active page language.

When signed in, support uses the current account. When signed out, it uses the current browser's visitor session. A visitor cannot switch to another visitor's session, and attachments and conversations remain limited to the current session.

A new visitor session requires a name and the primary contact required by the site's sign-in method: a valid email where email sign-in is used, or a valid phone number where phone sign-in is used. Signed-in users use their profile contact. The widget can ask for a correction when the contact is missing or invalid; changing an email can require an additional check when multi-factor sign-in is enabled.

Cart, checkout, and order pages can attach useful context to a support session. This helps support locate the problem but does not grant access to another person's order and does not submit a refund or change an order status on the user's behalf.

7.2 Sending, drafts, and attachments

The message editor accepts up to 10,000 characters and only checked attachments can be sent. Ctrl+Enter or Command+Enter uses the same action as Send. Send is disabled while the contact is invalid, a draft is not ready, an attachment is uploading or being checked, a draft conflict exists, or an attachment is expired.

Text is saved as a draft about 500ms after editing stops. Closing the widget, switching sessions, or leaving the page also attempts a final save. Drafts expire after seven days. If another tab changes the draft, the interface lets the user load the newer draft or keep the current input. A successful send saves the message and clears the draft.

Whether attachments are enabled, which image/video/PDF types are accepted, and the count and size limits come from the current site's settings. The interface displays the effective limits. An attachment must finish checking before it can be sent; blocked, failed, or expired files must be removed or uploaded again. Attachments can only be used in the conversation where they were added.

7.3 Replies, unread state, and updates

When the widget opens, it selects an unread conversation first, then the last conversation used in this browser, then the newest active conversation. The selected conversation refreshes while the widget is open and the page is visible; a background tab pauses updates.

When the widget is closed and the page is visible, unread summaries refresh periodically. A new support reply can produce an in-page notice and a button badge. Opening the selected conversation marks the latest support messages as read, and opening the widget hides the button badge.

7.4 Web messages and email

A support reply is first saved in the conversation. If the conversation has a valid email and the current support settings allow it, support can also send email. A mail failure does not delete the conversation message, so the widget history is the first place to check.

Support mail includes enough conversation context for the service to try to return a reply to the original conversation. If that context is missing, the reply may start a new conversation or require manual handling. Do not send passwords, multi-factor keys, verification codes, full card numbers, or CVC through the widget or email.

Order-confirmation and pickup-ready mail use the configured reply address. Include the public order number when replying; these messages are not the same as replying to a specific widget message.

8. Support history, archive, and visitor claim

8.1 Browse and manage history

Select the history button at the top of the widget. The default view is Active; All, Unread, and Archived are also available. Search accepts up to 200 characters and starts about 300ms after typing stops. The list shows 15 items by default, offers 30 and 50 through its pagination control, and refreshes periodically.

A row can show a custom or generated title, order/product/SKU context labels, status, a draft marker, unread count, the latest message summary, and time. Titles accept 1–160 characters and can be reset to the generated title; a simultaneous edit in another tab shows a conflict instead of silently replacing the newer version. Single or batch archive, restore, and mark-as-read actions require confirmation.

Archive changes the list for the current account or visitor; it does not delete messages. A new visible customer or support message automatically removes the conversation from the archived view. Internal staff notes are not shown in customer history.

8.2 New sessions, switching, and unavailable records

Before creating a new session, the widget saves the current draft. Switching sessions also attempts that save and stays on the current session if saving fails. The browser remembers the last selected session for the current use.

If a saved conversation later becomes unavailable, the widget clears the selection and chooses again from unread or active conversations. Changing browser data cannot open another user's conversation.

8.3 Claiming visitor data after sign-in

Signing in does not open a claim dialog and does not move visitor sessions automatically. The claim prompt appears only after the user opens support, enters the history panel, and the current browser has a conversation, an unexpired draft, or an unclaimed upload that can be moved. Clicking the prompt is followed by a second confirmation.

After confirmation, the site moves eligible visitor conversations, newer preferences and drafts, valid uploads, and customer labels. Expired drafts are excluded and conflicts are resolved by the latest update. On success, the interface reports the moved conversation and draft counts.

If the visitor session was cleared, the browser changed, or another device is used, the account may not be able to identify the former visitor session and the claim entry is not shown. Give support a public order number and approximate conversation time instead; never send private browser data.

9. Login sessions

9.1 Session state

The storefront keeps the current login secure in the browser. An expired or revoked session, a disabled account, or a security change can require a new login.

Logging out clears the current browser login and switches to an empty visitor cart. There is no user-facing device list or individual-session revoke page. Changing the password, completing password recovery, or resetting multi-factor sign-in through email can end all sessions for the account, including the current page. Follow the account page's instructions for login and recovery.

10. Security, privacy, and external content

• Language and theme choices are preferences, not login credentials. Keep login and support information private.
• Support attachments, conversations, drafts, and downloads belong only to the current account or visitor session. Archiving or renaming a conversation does not broaden access.
• Content shown by the storefront is prepared for display, but external links in published content should still be treated cautiously.
• Activity Learn more links and footer social links can leave the storefront. The destination site controls its own privacy, pricing, and transaction rules.
• A page address or hidden button does not change what an account is allowed to use.
• For support diagnostics, provide the active language, full page address, public order number, visible error, and approximate time. Do not provide passwords, recovery links, verification codes, browser data, or payment credentials.

11. Troubleshooting and recovery

12. FAQ

Can I save my search filters?

There is no account-level saved-search feature. The search term and applied filters are in the page address, so the complete address can be bookmarked; the number of loaded results and exact scroll position are not bookmark state.

Why does an old activity no longer show its original content?

Activities outside their public period or no longer published use the same ended/unavailable state and do not expose their old public content.

Why is the mobile homepage carousel not always 16:9?

The homepage carousel uses the site's configured display ratio. The activity-detail banner uses 16:9 on extra-small screens. They are different page areas.

Are support drafts permanent?

No. A support draft is available for seven days after it is saved; uploads can expire separately. Sending, clearing, or expiry changes what can be recovered.

Does changing interface language change support reply language?

The interface language changes the widget's displayed language. Support replies may use another language according to the conversation and the support settings.

How do I share a product or an ordinary page?

The product-detail Share action first uses the browser's native share sheet. When it is unavailable or cancelled, the page tries to copy the product address and shows a manual copy prompt if clipboard access fails. For other pages, copy the address bar; a search address includes its applied filters.