Dataveli Storefront manual

The front page brings together the main customer actions in one place. From the header you can move through the store, and on mobile the same access points are collected into the sidebar so that the page stays clean and easy to use on a smaller screen.

Header controls

• Language selector — switches the storefront language whenever translated content is available.
• Theme toggle — switches between light and dark presentation immediately.
• Tooltips switch — controls whether explanatory button hints are shown while browsing. The choice is remembered for the current session.
• Cart — shows the current cart contents and item count.
• Account — opens the customer account management page.

On desktop, the Quick start menu in the header is the fastest route into a meaningful catalog view. Instead of scrolling down and building the filter state manually, it can jump straight into featured products, products that are currently on sale, or one specific category from the moment the choice is made.

How quick start works

When a category is chosen from Quick start, the page scrolls directly to the Catalog section and the visible catalog filter state is updated to match the selection. This keeps the interface honest: customers can immediately see why those products are on screen.

Quick start was intentionally removed from the mobile sidebar so phone navigation remains calmer and easier to scan.

The catalog is the working center of the storefront. Products can be browsed either in card view or in list view. Card view gives more space to imagery and overall presentation, while list view is designed for denser comparison and quicker scanning.

In both modes, the important signals are still present: category, price, stock state, average review rating, and visual badges for featured or sale items. The category chips above the catalog also work as fast visual filters, and when there are many categories the row can be paged forward with the Show more control.

Product card actions

• View — opens a quick product modal without leaving the catalog. For signed-in customers, the modal also shows the Bought before quantity and any current in-cart quantity with stepper buttons.
• Product page — opens the full detail page for deeper reading.
• Add / Options — adds the product to the cart. If the button reads Options, the product has variants and a concrete choice must be made before it can be added.

The filter card is designed to support both quick narrowing and more deliberate product discovery. On desktop it is split into a primary row and a secondary row, and the extra filters can be collapsed when the customer wants a calmer view.

Primary filters

• Search — looks through names, descriptions, and related catalog information.
• Root category — restricts the result set to one main group.
• Subcategory — narrows the view one level deeper. The same state is mirrored by the chip row above the catalog.
• Sort — changes the order of products by price, recency, popularity, or other criteria.

Secondary filters

• Price range — limits results to a minimum and maximum price.
• In stock — shows only products that are currently available.
• Featured — shows only products that have been highlighted by the store.
• On sale — shows only products with active discounts.
• Has reviews — shows only products that have been reviewed by customers.

Quick start, category chips, root category, subcategory chips, and the API-backed result list are kept in sync so the reason for the current result set is always visible. If too many conditions pile up, Reset filters clears the state and brings the catalog back to its default form with one action.

The product page gives the full picture of a single item. It combines the longer description, gallery images, visible pricing, any active sale state, available variants, stock information, customer reviews, and for signed-in customers the Bought before quantity from earlier orders.

Variants and pricing

For products with variants, the page updates price and availability based on the selected option so that the customer is not guessing what they are about to purchase.

Other product page actions

• Image preview — images can be opened into a larger fullscreen preview for closer inspection, which is especially helpful on mobile.
• Print or PDF — opens the browser print flow and can be used to save the product page as a file.
• Add to cart — always applies to the product or variant that is currently selected.

The cart shows the complete working order before checkout. It lists the chosen products, their quantities, row-level pricing, subtotal, tax, and delivery impact. Quantities can be adjusted directly, individual rows can be removed, and the whole cart can be cleared if the order needs to be rebuilt from the beginning.

Saved carts

For signed-in customers, the cart also becomes a reusable planning tool. Saved carts can be managed with the following actions:

• Save — stores the current cart for later use.
• Restore — loads a previously saved cart back as the active cart.
• Copy — duplicates a saved cart as a new starting point.
• Delete — removes a saved cart that is no longer needed.

When draft cart autosave is enabled, the store keeps the current cart state automatically on the account. This is useful for customers who build larger orders over more than one visit.

Delivery information

Checkout collects the information needed to complete the order properly. Customers enter contact details and delivery information, then choose the shipping method that fits the purchase. Shipping charges and any free-shipping threshold are calculated automatically, so the customer can see how the final amount is forming before leaving the page.

Payment

Once the order is placed, the store moves into the payment step. Available methods depend on the store configuration and may include card, PayPal, or invoice.

The printable invoice always reflects the real stored order values, including discounts, tax, and shipping. That makes it a reliable source of truth both for the customer and for later reference.

The account area acts as the customer's own control center. It brings together profile information, password changes, saved carts, and the full order history in one place. Edit details updates the stored customer information, while Change password handles account security separately so the two concerns do not become mixed together.

Order history actions

The orders table can be filtered by order status, payment status, payment method, and shipping method. Each order row provides the following actions:

• View — opens the order details modal.
• Reorder — sends the products back into the cart if they are still available.
• Order timeline — reveals the event history of the order from creation onward.

Because these tools live side by side, the account page is usually the fastest way to understand what has been ordered, what is happening now, and what can be done next.

The review system is connected to real orders instead of anonymous browsing. Customers can add product reviews from delivered or returned orders, which makes the visible ratings more trustworthy and keeps them grounded in actual purchase experience.

Writing a review

The Add review action opens an in-page modal where the customer chooses the purchased product, gives a star rating, and optionally writes a review title and description.

Editing and deleting reviews

If a review already exists for that product, the same flow can update it rather than creating a duplicate. The quick product modal in the catalog also exposes the same personal review state, so the customer can edit or delete their review there without leaving the browsing context.

Published ratings then influence the averages shown in the catalog and on product pages, helping later customers understand how other buyers have experienced the item in practice.

Some storefront views, especially the account order history, use DataTables features. This turns a plain table into something customers can actually work with: rows can be sorted, the visible page size can be changed, and built-in search helps narrow the view without leaving the page.

Table tools

• Columns — controls which columns are visible, useful for narrowing or expanding the table.
• Excel — exports the current table view as an Excel file.
• PDF — exports the current table view as a PDF file.

In practice, the visible state of the table matters: what the user searches, sorts, and chooses to display is the context in which the data is being reviewed before export. This makes export a natural extension of analysis rather than a separate, disconnected action.

The storefront becomes easier to use when its main patterns are combined rather than used one by one. The three main areas work together:

• Quick start — for jumping directly into a relevant part of the catalog.
• Filter card — for refining the result set with precision.
• Account page — for reviewing earlier orders, invoices, and follow-up actions.

Thinking of the interface in those three layers usually makes navigation feel natural very quickly.

Good to remember

Tooltips are most useful while learning the interface or guiding another user for the first time, but they can be turned off for a quieter experience once the store feels familiar.

Variant products deserve special attention, because an Options button means the product still needs a concrete choice before it can be purchased. Before final payment, it is always worth reviewing the invoice or order modal once more, especially when discounts, sales, or several line items are involved.