Adding Items by Search
Find products via the search screen and add them to a cart.
When a barcode cannot be scanned, products can be added to a cart via the product search. Tap the search bar on the Home screen to open the full search view, then type a name, SKU, brand, or EAN to find the product. If the result is a product with multiple variants, a variant picker lets you choose the exact size and colour before the item is added.
Opening the search
On the Home screen, tap the Search products bar at the top of the product panel. The search screen opens with the keyboard raised and the search field already focused so you can start typing immediately.
On mobile (phone-sized screens), the search opens as a full-screen page. On tablet and desktop, it appears inline within the home layout.
Searching for a product
- Type a product name, SKU, brand, or EAN into the Search products field.
- Results update automatically as you type (after a short pause). No need to press Enter or tap a button.
- The number of results is shown above the list (e.g. 42 results).
- Scroll through the results to find the product you need.
On Android and iOS, the header also shows a camera icon. Tap it to switch to barcode scanning instead of typing. See Adding Items by Scan for that flow.
Clearing or changing the query
Tap the × inside the search field to clear the current query and show the full product catalogue, or type a new term to replace the current search.
Reading a product card
Each product appears as a card in the results list.
Mobile layout:
| Element | Description |
|---|---|
| Product image | 60 × 60 px thumbnail; a placeholder icon is shown if no image is available |
| Product name | Shown in bold |
| Brand | Shown below the name in muted text |
| SKU | Article number below the brand |
| Size / Colour chips | Small rounded chips showing the variant attributes |
| Price | Unit price for the product |
| Inventory badge | Stock level indicator |
| Variant count chip | Accent-coloured chip (e.g. 3 variants) shown on parent products that have multiple variants |
| Cart quantity badge | Accent-coloured badge in the top-left corner (e.g. x2) when this product is already in the active cart |
| Orange dot | Shown on the product image when the product is inactive |
Desktop / tablet layout: the same information is shown, with price, cost, and inventory appearing in separate columns on the right side of the card.
Adding a single-variant product to the cart
Tap the product card. If the product is a single SKU (not a parent with variants), it is added to the active cart immediately and a notification confirms the action:
[Product name] added to cart
If no cart is active, a new cart is created automatically using the device's default store and order type.
Adding a product with multiple variants
If the product has more than one variant (for example, different sizes or colours), tapping the card opens the variant picker instead of adding directly to the cart.
The variant picker slides up from the bottom of the screen as a sheet. It shows:
- A shopping cart icon and the parent product name in the header, with a close button on the right.
- A scrollable list of variant cards.
Each variant card shows:
| Element | Description |
|---|---|
| Variant image | Thumbnail for the specific variant |
| Variant name | Name or alternative name of the variant |
| SKU | Article number for the variant |
| Size chip | Size: [value] (if the variant has a size) |
| Colour chip | Color: [value] (if the variant has a colour) |
| Price | Unit price in the store's currency |
| Inventory badge | Stock level for this specific variant |
Tap the variant card you want to add. The sheet closes and the variant is added to the cart. The same [Product name] added to cart confirmation is shown.
You can drag the sheet to resize it or tap the close button to dismiss without selecting.
Filtering and sorting results
Tap the sliders icon on the right side of the search bar to open the Filters panel. The panel slides in from the right (full width on mobile, 450 px on larger screens).
The filter panel is divided into sections:
| Section | Options |
|---|---|
| Sort products by | Best Match, Most Popular, Created Date, Modified Date, Published Date, Price (Low → High / High → Low), Discount, Inventory, Product Name, SKU, and others |
| Facets | Dynamic filters derived from the current search results (brand, category, etc.) |
| Categories | Filter by product category |
| Published Date | From / to date range |
| Price | From / to range; on-sale toggle |
| Inventory | In-stock toggle |
| Status | Active / Published / Deleted toggles |
Tap Apply filters at the bottom to apply the selection. The results list refreshes immediately.
Active filters are shown as chips below the search bar. Tap a chip to remove that individual filter. To remove all filters at once, tap Clear All in the filter panel header.
Browsing all products (no query)
With an empty search field, the product catalogue is shown in its entirety, sorted by the current sort order. Use this when you want to browse by category or filter rather than searching by keyword.
Pagination
Results are paginated. Navigation controls appear at the bottom of the list showing the current page and total (e.g. Page 1 of 5). Tap the left or right chevron to move between pages.
Offline mode
If the device loses connectivity, the app falls back to the locally cached product catalogue (requires the offline sync feature to be set up). An orange offline banner appears above the results indicating that cached data is being shown and when it was last synced. Filters and search still work against the cache. Reconnect to the network to restore live results.
Offline product search is not available on web. It requires the offline sync feature to be enabled and an initial sync to have completed on the device.
Closing the search
Tap the × (close) icon in the top-right corner of the search screen to return to the Home screen. Any items already added to the cart are kept.