Products
Products is the master catalogue for everything you sell — names, prices, tax, stock levels, variants, bulk-quantity pricing, kit/combo bundles and add-on modifiers all live here. It is the single source of truth every other page (billing, inventory, barcodes, reports) reads from.
Overview
The Products page lists every item you sell in a searchable, sortable, filterable table (or a photo-grid view), with live stat cards for total/active/low-stock/out-of-stock counts and total stock value.
Clicking Add Product or Edit opens a full-screen form organised into cards: Basic Info, Pricing & Tax, Inventory & Stock, and — once a product is saved — five more sections unlock underneath: Variants, Price Tiers, Components (for kits), Alt. Units and Modifiers. An Additional Details card and an SEO & Social Media card are also available in Advanced mode.
Beyond the core form, the page hosts four connected tools: a Category Manager (colour-coded, nestable one level deep), a Bulk Import modal (CSV/Excel with a downloadable template and row-by-row validation preview), a Barcode Print modal (multi-size, multi-layout label sheets), and CSV/Excel/PDF export of the currently filtered list.
Everything here is scope-aware: an Admin creating a product picks Visibility (This branch only / All branches in unit / All branches in company), and Company-level or Unit-level items are shown with a small "Co." / "Unit" badge in the list so Admins can tell at a glance where an item lives.
Before You Start
- You need at least view access to the Products page — ask your Admin to grant it under Settings → Staff Permissions if the page is not in your sidebar at all.
- Stock-related fields, filters and the Stock column only appear when the Inventory feature is enabled for your plan; the Print Labels button and barcode column only appear when the Barcode feature is enabled.
- Discount percentage badges on the price column only render when the Discounts feature is enabled.
- If your plan has a product limit, the Add Product button is blocked with a toast once you hit it ("Your plan allows up to N products. Upgrade to add more.") — the count is shown next to the button as (used/limit).
Step-by-Step Guide
1 Browse, search, filter and sort the catalogue
The default table view is built for speed when you have hundreds of SKUs.
- Type in the search box to filter by name, SKU or barcode — search is debounced (waits 400ms after you stop typing) and resets you to page 1.
- Use the Category dropdown to narrow to one category, and the Status dropdown for Active / Inactive / Low Stock / Out of Stock (the last two only show when Inventory is enabled).
- Click any of the stat cards at the top (Total, Active, Low Stock, Out of Stock) to instantly apply that same filter — the active card is highlighted with a blue ring.
- Click a sortable column header (Product, Price, Cost) to sort by it; click again to flip between ascending and descending — a small arrow icon shows the current direction.
- Switch between Table view (dense, spreadsheet-like) and Grid view (photo cards) with the two icons on the right of the toolbar.
- Use Prev / page-number buttons / Next at the bottom to page through results — 10 products are shown per page.
2 Add or edit a product — Basic Info, Pricing & Tax, Inventory
Click Add Product (or the pencil icon on any row) to open the full-screen product form.
- In Basic Info, enter the Product Name, optionally Brand and Season/Collection, choose a Unit (from your Settings → Stock Settings unit list) and how it is Sold — per unit, by length (cut to size), or by area (width × height, for glass/plywood/fabric).
- Pick a Category from the dropdown, or choose "+ Add New Category" to create one inline without leaving the form; use "Manage categories" to open the full Category Manager.
- Write a Description using the built-in rich text toolbar (Bold, Italic, Underline, bullet and numbered lists), add Tags by typing and pressing Enter, and add product Images either by pasting an image URL or uploading files from your device.
- In Pricing & Tax, enter Selling Price and Cost Price (both required) plus optional MRP and Discount %. Pick the tax rate — the label and CGST/SGST/IGST or GST/PST split shown automatically match your business's configured tax system (GST India, VAT, Sales Tax, etc.); Composition-scheme and Unregistered dealers see a locked, explanatory field instead since per-product tax does not apply to them.
- Optionally assign one or more Tax Master taxes under "Tax Master Assignment" — this shows a live preview of the tax breakdown and final price as you add taxes.
- Choose Product Type (Goods vs Services) to reveal the matching HSN Code or SAC Code field, and set GST Cess % if the item is tobacco, a luxury good or an aerated drink.
- A live Profit Margin card appears once both Price and Cost Price are filled in, showing margin %, profit per unit, and the effective price after any discount.
- In Inventory & Stock, set the SKU (required — use the Auto button to generate one from the category/name) and an optional Barcode (Gen button creates a random EAN-style code). Set Opening Stock (new product) or Current Stock (editing), Min Stock Level, Max Stock Level and Reorder Point.
- Toggle Sold by Weight to price the item per kg/other unit and add a PLU/scale code; toggle Age-Restricted Item to force ID verification at billing (with a configurable minimum age); toggle Composite/Kit Product for bundles; toggle Track Inventory, Serial Number Tracking and Batch/Lot Tracking as needed.
- Click Create Product (or Update Product). On first save the product stays open in edit mode so you can immediately configure Variants, Alt. Units and Modifiers — a toast reminds you of this.
3 Fill in Additional Details and SEO (Advanced mode)
Toggle Advanced / Basic mode with the pill button in the form's footer — your choice is remembered on this device.
- Additional Details (Advanced mode) covers Manufacturer, Part/Model Number, a Cashier Note shown to staff when the item is scanned, Weight & Dimensions for shipping, and food/pharmacy fields: Composition, Generic Name, Drug Schedule (None/H/H1/X/Narcotic — a Schedule other than None makes billing require a doctor and patient name), Allergens and Ingredients (both tag lists).
- SEO & Social Media (Advanced mode, existing products) shows the live Storefront Product URL with copy and open-in-new-tab buttons, an editable URL Slug, Meta Title (70-character counter), Meta Description (160-character counter), Meta Keywords, and a Social Share Image with a "Use Product Photo" shortcut that reuses the first product photo.
4 Configure Variants, Price Tiers, Alt. Units, Modifiers and Kit Components
These five manager cards only appear once a product has been saved (Advanced mode) — each is its own independent, auto-saving mini table.
- Variants — click Add Variant and fill Name (e.g. "500g / Red"), SKU (Auto button available), Barcode, Price (leave blank to inherit the parent price), Cost Price, Stock and Active; edit or delete any row inline.
- Price Tiers — click Add Tier for quantity-based pricing: Tier Name, Min Qty, Max Qty (blank = no upper limit), Price (shows the automatic % discount vs. the base price) and optionally a Customer Group so a tier only applies to that group (e.g. a "Contractor" price list) — group-scoped tiers beat "All customers" tiers of the same quantity.
- Alt. Units — click Add Unit to let the same product be sold in other units (e.g. dozen, case). Set the unit name, a Conversion Factor relative to the base unit (1 dozen = 12 pcs → factor 12), an optional fixed Price (blank auto-calculates as base price × factor) and an optional dedicated Barcode to scan straight into that unit.
- Modifiers — use the modifier editor to define add-on groups shown to the cashier at sale time (e.g. size or toppings). Mark a group "One" (pick exactly one) or "Many" (pick multiple), mark it Required to force a choice before checkout, and set a price per option (0 = free).
- Components (only meaningful once "Composite / Kit Product" is turned on) — search for and add other products as components with a Qty per Kit and an optional note; the card totals the running kit component cost, and each component's stock is automatically deducted whenever the kit itself is sold.
5 Organise categories
- Click the Categories button in the toolbar (or "Manage categories" inside the product form) to open the Category Manager.
- Fill Name (required), optional Description, optional Parent Category (categories nest one level deep) and pick a colour from the ten presets or a custom colour picker; Admins also choose Visibility (branch/unit/company) when creating.
- Click a category with sub-categories to expand/collapse its children; each row shows how many products are in it.
- Edit or Delete any category from its row — deleting one with sub-categories promotes them to top-level, and any products in the deleted category simply become uncategorised (a confirmation dialog explains this before you proceed).
6 Bulk import products from a spreadsheet
- Click Import in the toolbar to open the Bulk Import modal.
- Drag & drop or click to upload a CSV, XLSX or XLS file — or click "Download sample template" first to get the exact column layout with an example row.
- Required columns are Name, Price and Cost Price; SKU is optional but any SKU that matches an existing product updates it instead of creating a duplicate. Barcode, Category, Brand, Unit, Tax Rate, MRP, HSN Code, Opening Stock, Min/Max Stock, Reorder Point and Discount are all optional.
- Review the Preview step — every row is validated client-side and shown as OK (green) or with a specific error (red, e.g. "price invalid"); the header bar shows a running count of valid vs. error rows.
- Click "Import N Products" to send only the valid rows to the server. The final step reports how many were created vs. updated, plus a list of any server-side rows that were still skipped and why.
7 Print barcode labels for one or many products
- Click Print Labels in the toolbar (only visible with the Barcode feature enabled) — it opens seeded with the products currently loaded on your page.
- Search the left-hand product list, check the ones you want, and use the +/− stepper (or type a number) to set how many copies of each label you need — up to 100 per product.
- Choose a label Size (Small/Medium/Large) and a sheet Layout (1/2/3/4 labels per row), and toggle whether to Show name and Show price on each label.
- Review the live preview grid, then click "Print N Labels" — this opens a dedicated print window sized to your chosen layout and triggers the browser print dialog automatically.
8 Bulk actions, inline edits and export
- Select multiple rows with the checkboxes to reveal a bulk-action bar: Activate and Deactivate (Manager/Admin), Delete (Admin only, with a confirmation prompt), and Clear selection.
- Click directly on a product's SKU text in the table to edit it inline — press Enter to save or Escape to cancel — and click the Active/Inactive icon to toggle status with one click (both require Edit rights).
- Use the Export dropdown (needs Export rights) to download the entire filtered/sorted list — not just the current page — as PDF, Excel or CSV, complete with SKU, Name, Brand, Category, Unit, Price, Cost, Tax, Stock, Discount and Status columns.
Every Field & Button, Explained
| Field / Button | What it does |
|---|---|
Stat cards (Total / Active / Low Stock / Out of Stock / Stock Value) | Live counts from /products/stats; clicking a card (except Stock Value) applies the matching status filter to the table below. Low Stock, Out of Stock and Stock Value only appear when the Inventory feature is on. |
Search box | Debounced 400ms free-text search across product name, SKU and barcode, run server-side. |
Category filter | Restricts the list to one category (top-level or sub-category). |
Status filter | All / Active / Inactive / Low Stock / Out of Stock — the last two require the Inventory feature. |
Table / Grid toggle | Switches between a dense spreadsheet-style table and a photo-card grid; both share the same filters, sorting and pagination. |
Import button | Opens the Bulk Import modal (CSV/Excel). Requires Create rights. |
Print Labels button | Opens the Barcode Print modal seeded with the currently loaded products. Requires Create rights and the Barcode feature. |
Add Product button | Opens a blank product form; blocked with a toast if your plan's product limit has been reached. |
Categories button | Opens the Category Manager modal. Requires Edit rights. |
Export dropdown (PDF / Excel / CSV) | Re-fetches every matching product (ignoring pagination) and downloads it in the chosen format. Requires Export rights. |
Bulk action bar | Appears once one or more rows are checked: Activate / Deactivate (Manager+) and Delete (Admin only, with confirmation), plus Clear selection. |
Inline SKU edit | Click a product's SKU in the table to edit it directly; Enter saves, Escape cancels. Manager/Admin only. |
Active/Inactive toggle icon | One-click status flip directly from the table row for users with Edit rights; read-only badge otherwise. |
Delete (row action) | Soft-deletes the product; products with existing sale history are deactivated instead of hard-deleted so historical bills remain intact. |
Product Name * | Required. The name shown everywhere — POS, receipts, reports, storefront. |
Visibility (Admin, create-only) | "This branch only" / "All branches in unit" / "All branches in company" — controls which stores can see and sell this product. |
Brand / Season-Collection | Free-text descriptive fields used for filtering, search and merchandising (e.g. brand name, "SS25", "Eid 2025"). |
Unit | Base unit of sale (pcs, kg, box, etc.), sourced from Settings → Stock Settings custom units. |
Sold by | Per unit (normal) / By length (cut to size) / By area (width × height) — changes what billing asks for at sale time. |
Category (+ Manage categories / + Add New Category) | Assigns the product to a category; you can create a brand-new category inline without leaving the form. |
Description | Rich-text field (bold/italic/underline/lists) shown on the storefront and printable catalogues. |
Tags | Free-form keyword chips — type and press Enter to add, click × to remove. |
Images | Add by URL or upload from device (multiple files supported); shown as thumbnails with a hover remove button. |
Selling Price * | Required. The price charged to customers before tax/discount. |
Cost Price * | Required. Your purchase/landed cost — drives the profit margin calculation and is never shown to customers. |
MRP | Optional maximum retail price, printed on receipts/labels where applicable. |
Discount (%) | A standing discount percentage automatically applied at billing. |
Tax Rate (%) | Dynamic label (GST/VAT/Sales Tax) and slab list based on your configured tax system; shows CGST/SGST/IGST (India) or GST/PST (Canada) splits automatically. Disabled with an explanatory note for Composition-scheme or Unregistered dealers. |
Tax Master Assignment | Assign one or more taxes from the multi-country Tax Master; shows a live tax breakdown and final-price preview as you add/remove taxes. |
GST Cess (%) | Additional cess for tobacco, luxury goods or aerated drinks, on top of the regular tax rate. |
Product Type | Goods (shows HSN Code field) or Services (shows SAC Code field). |
Profit Margin card | Auto-calculated once Price and Cost Price are both set: margin %, profit per unit, and effective price after discount. |
Sold by Weight toggle + PLU code | Marks a loose/weighed item and lets you set a short PLU/scale code for keypad entry and scale labels. |
Age-Restricted Item toggle + Minimum age | Forces the cashier to confirm the customer's age before this item can be billed. |
Composite / Kit Product toggle | Marks this product as a bundle made of other products; unlocks the Components manager after saving. |
Track Inventory toggle | Turns stock tracking on/off for this product (off for services or non-stocked items); hidden entirely for kit products. |
Serial Number Tracking / Batch-Lot Tracking toggles | Only shown when Track Inventory is on; enable per-unit serial numbers or per-batch/lot + expiry tracking respectively. |
SKU * (+ Auto) | Required unique stock code; Auto generates one from the category/name plus a random suffix. |
Barcode (+ Gen) | Optional scannable code; Gen creates a random timestamp-based numeric code. |
Opening Stock / Current Stock | Opening Stock sets the starting quantity when creating a new product; Current Stock directly overwrites the quantity when editing. |
Min Stock Level / Max Stock Level / Reorder Point | Min drives the low-stock alert threshold; Max and Reorder Point support purchasing and stock-count workflows. |
Manufacturer / Part-Model Number | Advanced-mode fields for supplier/manufacturer traceability. |
Cashier Note | A short note shown to the cashier the moment this item is scanned at billing (e.g. "Age verification required"). |
Weight & Dimensions | Shipping-relevant physical attributes: weight + unit, and length × width × height + unit. |
Composition / Generic Name / Drug Schedule / Allergens / Ingredients | Food and pharmacy fields; a Drug Schedule other than "None/OTC" makes billing require doctor and patient details for that sale. |
Storefront Product URL | Live link to this product on your online store, with copy and open buttons; only shown for saved products with an online store configured. |
URL Slug / Meta Title / Meta Description / Meta Keywords / Social Share Image | Standard SEO fields controlling how the product appears in search engines and when shared on social/WhatsApp. |
Advanced / Basic mode toggle | Shows or hides Additional Details, SEO, and the Variants/Price Tiers/Components/Alt. Units/Modifiers managers; remembered per device. |
Variants manager | Size/colour/weight variations, each with its own SKU, barcode, optional price/cost override and stock. |
Price Tiers manager | Quantity-based bulk pricing slabs, optionally scoped to a customer group; applied automatically at billing. |
Alt. Units (UOM) manager | Sell the same product in other units (dozen, case) with a conversion factor, optional fixed price and dedicated barcode. |
Modifiers manager | Add-on option groups (single- or multi-select, optionally required) offered to the cashier at sale time, each option with its own extra price. |
Components manager (kits only) | The products that make up a kit/bundle, each with a quantity-per-kit; shows the running total component cost and auto-deducts component stock on sale. |
Category Manager: Name / Description / Parent / Color / Visibility | Creates or edits a category; categories nest one level deep and can be colour-coded for quick recognition in lists. |
Bulk Import: Download sample template | Downloads an Excel file with the exact expected column headers and one filled example row. |
Bulk Import: Preview step | Client-side validation of every row before import — flags missing name, invalid price or invalid cost price per row. |
Barcode Print: Size / Layout / Show name / Show price | Controls label dimensions, how many labels per row on the printed sheet, and which text appears on each label. |
Tips & Best Practices
- Turn on Advanced mode once and leave it on if you regularly configure Variants, Price Tiers or Modifiers — it is remembered per device, not per session.
- Use the Auto button for SKUs so codes stay consistent (category prefix + random suffix) instead of ad-hoc numbering across staff.
- Set Min Stock Level realistically on every product — it directly drives the Dashboard's Low Stock Alerts and this page's Low Stock filter.
- For combo/gift-hamper style products, turn on Composite/Kit Product first, save, then add Components — component stock is deducted automatically so you never have to adjust it by hand after a kit sale.
- Download the Bulk Import sample template even if you already have a spreadsheet — matching the exact header names avoids rows silently failing to map.
- Use Price Tiers with a Customer Group instead of Discount % when you need a completely separate rate card for wholesale/contractor customers.
Troubleshooting & FAQ
I deleted a product but it still shows up as "Inactive" instead of disappearing.
The Add Product button is disabled / shows a plan-limit warning.
Why don't I see the Stock column, Low Stock filter, or Print Labels button?
I can't see Variants, Price Tiers, Components, Alt. Units or Modifiers on a new product.
Bulk import skipped some of my rows.
A variant/tier/UOM row I edited doesn't seem to have saved.
Why is the GST/VAT rate field locked on some products?
🧑💻 Developer Notes
Source component(s):
frontend-app/packages/pos-react-lib/src/pages/Products.jsxfrontend-app/packages/pos-react-lib/src/pages/products/ProductForm.jsxfrontend-app/packages/pos-react-lib/src/pages/products/CategoryManager.jsxfrontend-app/packages/pos-react-lib/src/pages/products/VariantManager.jsxfrontend-app/packages/pos-react-lib/src/pages/products/PriceTierManager.jsxfrontend-app/packages/pos-react-lib/src/pages/products/BulkImportModal.jsxfrontend-app/packages/pos-react-lib/src/pages/products/BarcodePrintModal.jsxfrontend-app/packages/pos-react-lib/src/pages/products/UOMManager.jsxfrontend-app/packages/pos-react-lib/src/pages/products/TaxAssignment.jsxfrontend-app/packages/pos-react-lib/src/pages/products/ComponentManager.jsxfrontend-app/packages/pos-react-lib/src/pages/products/ModifierGroupManager.jsx
Backend endpoints used:
GET /productsGET /products/statsGET /products/categoriesPOST /products/categoriesPUT /products/categories/:idDELETE /products/categories/:idPOST /productsPUT /products/:idDELETE /products/:idPOST /products/bulkPOST /products/importGET /products/:id/variantsPOST /products/:id/variantsPUT /products/:id/variants/:variantIdDELETE /products/:id/variants/:variantIdGET /products/:id/price-tiersPUT /products/:id/price-tiersGET /products/:id/uomsPUT /products/:id/uomsGET /products/:id/componentsPOST /products/:id/componentsPUT /products/:id/components/:componentIdDELETE /products/:id/components/:componentIdGET /tax-master/taxesGET /tax-master/products/:id/taxesPOST /tax-master/products/:id/taxesDELETE /tax-master/products/:id/taxes/:taxIdPOST /tax-master/products/:id/calculate-taxGET /settings/unitsGET /settings/customer-groupsGET /online-portal/domain
Related tables (db-core repositories):
ProductProductCategoryProductVariantProductPriceTierProductUOMProductComponentModifierGroupModifierOptionProductTaxTaxMasterInventoryCustomerGroup
Redux slices:
auth (role, selectedStoreId)license (planInfo.limits.maxProducts)taxConfigNavPermissionContext (canCreate/canEdit/canDelete/canExport)
Feature flag key: billing
Products.jsx itself has no minimum plan tier, but three of its own buttons are individually feature-gated at render time: Print Labels needs the barcode feature, the Low Stock/Out of Stock stat cards and filter options need inventory, and the discount badge on the price column needs discounts. The five sub-managers (Variants, Price Tiers, Alt. Units, Modifiers, Components) are independent, self-saving widgets embedded in the same form — each calls its own dedicated REST endpoints rather than being part of the product's own PUT payload (Modifiers is the one exception: it saves via PUT /products/:id with a modifierGroups field).