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, including the OLED and Candy options.
• Search — opens the search panel, which looks products up by name and description. The panel also opens automatically while scrolling into the catalog section, and closes again on scrolling away.
• 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 in card view, list view, or a denser small-grid view — the mode can be switched at any time from the icons above the catalog. Card view gives more space to imagery and overall presentation, while list view is designed for denser comparison and quicker scanning.

In every mode, 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 — the fuller Category Directory and search options are covered in the sections that follow.

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.
• Favourite, compare, price history, QR, and share — the smaller icon buttons on the card's second row; each is covered in its own section below.

Tip: on desktop, a product card can also be dragged straight onto the cart icon or the floating cart panel to add it to the cart without opening the card at all.

The Category Directory near the top of the front page presents the whole range one department at a time: each main category gets its own column with an image, name, and a product count covering its entire subcategory tree. A column opens on click, and subcategories can themselves contain further nested groups several levels deep — the directory opens those on demand too.

Quick jump and filtering

The category rail directly below the heading offers the same range as smaller, horizontally scrollable icons — a fast way to jump straight into one department without opening the full directory. The directory's own Filter button can also narrow the visible departments to those with sale items, featured products, or new arrivals.

Selected-categories indicator

Whenever a category or subcategory is selected, a floating indicator appears in the bottom-right corner listing every active category selection as a small removable token. A single token can be removed on its own, or the whole selection can be cleared with one button — the same indicator also works as a shortcut for adding another category without going back into the directory.

The store offers three distinct ways to search, depending on what is being looked for.

• Header search — a free-text search panel that looks products up by name and description and filters the catalog result list directly. It appears automatically while scrolling into the Catalog section.
• Quick-find above the catalog — type a product name and pick a match from the list that opens. From there the product can be added to the cart, favourited, or opened on its own page without touching the catalog filters at all.
• The Category Directory's own search field — narrows the department and category names shown in the directory; it does not search individual products, but helps locate the right department quickly in a large range.

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 front page shows a row of recently opened products so they are easy to return to later in the same browsing session. The row fills up as products are opened from the catalog, a product page, or the quick-view modal.

This history is stored in the browser, not on the customer account, so it never appears on another device or to another person using the same shared computer — it clears automatically on sign-out so the next customer on a shared device does not see what was viewed.

The compare button on a product card adds it to a floating compare bar at the bottom of the screen. Up to four products can be collected at once (three on mobile), and each one can be removed individually or the whole selection cleared with one button.

Once the bar holds at least two products, Compare now opens a table showing them side by side: image, description, SKU, category, price, stock, star rating, and any badges. From that table a product can be added straight to the cart, or opened on its own page if it has options to choose from first.

The compare selection is stored in the browser the same way recently viewed products are, so it works for both guests and signed-in customers, but it does not follow to another device and clears on sign-out.

Signed-in customers can favourite products from the product card, quick-view, or the product page. Favourites collect on their own page, where each item can get a private note, be reordered, and have its price tracked over time.

Price watch

Every favourite has its own toggle that gives notice when the product's price drops — the same toggle can be switched on for every favourite at once from the top of the list.

Stacks and Sea of Products

Favourites can be organised into named stacks — for example, gift ideas or a specific project — by dragging them into their own group. Stacks also appear in the Sea of Products view, and a whole stack can be added to the cart in one action; if any item still needs an option chosen, the store asks for it separately before adding.

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.

Two smaller icon buttons on the product card and product page open extra tools that help both the buying decision and sharing the product.

Price history

The chart icon opens the product's price over a chosen period, so it is easy to see whether the current price is an unusually good deal or a sale that has already been running for a while.

QR code

The QR icon generates a code in one of three modes: for sharing, for in-store use, or linking to the product's whole category. The code can also be printed directly from the browser's print view.

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.

Alongside reviews, the product page and quick-view have a separate comment thread where anyone can discuss the product or ask about it publicly — unlike a review, a comment does not require a past purchase. Depending on the store's settings, comments may need staff approval before other customers can see them.

Ask about this product

For a more personal question that should not go into the public comment thread, the Ask about this product button on the card sends a message straight to customer service through the account Messages section — the reply arrives in the same place, and the question is never visible to other customers.

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.

Every order passes through a defined set of statuses from checkout to delivery. The current status is visible in the order history on the account page, in the order confirmation email, and in the order detail view.

Normal progression

• Waiting for payment — order received and stock reserved, waiting for payment to be confirmed.
• Waiting for processing — payment confirmed, order queued for fulfilment.
• Processing — items being picked and packed. The order can no longer be cancelled without contacting support.
• Shipped — package handed to the courier. A confirmation is sent when the shipment is registered.
• Delivered — package received. A review can now be submitted from the account page.

Other statuses

• Waiting for product — one or more items are on backorder; the shipment cannot go out in full yet.
• Cancelled — the order was cancelled by the customer or the store. Any payment is refunded to the original payment method.

If an order seems to be taking longer than expected or you have a question about delivery, contact support through the Messages section on the account page.

Sea of Products is an alternative, more playful way to browse the range: every product with a photo floats as its own card on a large, freely draggable surface instead of a straight list. It suits moments when the goal is just to browse without a specific search in mind.

• Drag cards freely around the surface; double-click opens the product's quick-view.
• Filter buttons narrow the view to only sale items, featured products, or new arrivals.
• Drag a card onto the sidebar's "Save for later" area to collect it into its own list without it disappearing from view.
• Drag a card onto the cart icon in the bottom-left corner to add it straight to the cart.

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 interface density controls how much content and decoration is shown across the storefront. Click the density icon in the header to switch modes from the welcome panel.

On a phone, the store uses the same content in a layout built for touch. A few things only exist in the mobile view:

• Drag a product card to the right to add it to the cart without a separate tap.
• Swipe a cart or favourites row to the left to remove it — an Undo option appears right away if that was a mistake.
• Press and hold a product card to open its quick-view without leaving the list.
• Compared products collect into their own bar at the bottom of the screen the same way they do on desktop, up to three at a time.

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

• Quick start and search — for jumping directly into a relevant part of the catalog or a single product.
• Filter card and Category Directory — for refining the result set with precision.
• Favourites and compare — for holding on to interesting products and looking at them side by side before deciding.
• Account page — for reviewing earlier orders, invoices, and follow-up actions.

Thinking of the interface in those 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. It is also worth remembering that recently viewed products, the compare selection, and search history are tied to the browser, not the account — they do not follow to another device.