Online Portal
Online Portal is your shop's own ordering website — a shareable link where customers browse and place advance orders without installing an app — split into an Orders tab for managing incoming requests and a Settings tab for branding, order rules and domain setup.
Overview
A Customer Portal Link (/#/portal/:tenantId) is generated automatically per store; it can be opened or copied straight from the Settings tab and shared with customers on WhatsApp, social media or a shop sign.
If a public SEO storefront has been provisioned for your store, its own separate URL is shown in a second box — this is the address search engines and browsers see, distinct from the in-app portal link above it.
If that storefront address looks like it was generated from your phone number (because no business name was set at signup), an amber warning appears with a one-click "Update address from Business Name" button once you have set a real name under Settings → Shop Info.
A Custom Domain card lets you bring your own domain (e.g. www.myshop.com); after entering it, the domain shows "Pending setup" until you point its DNS at BazaarPOS and contact support to finish HTTPS activation, after which it shows "Live".
The Storefront Theme block controls the accent colour, an optional logo URL, whether the welcome message and category grid show on the storefront home page, and the display order of those home-page sections (reorder with up/down arrows).
Order Rules set a minimum lead time (in days) customers must order ahead of, and a daily cut-off time after which an order counts as next-day; a master Portal Active toggle takes the whole portal offline (customers see a "not available" message) without deleting any settings.
The Orders tab lists every advance order with a status pill (Pending → Confirmed → Preparing → Ready → Completed, or Cancelled), and expands to show line items, tax breakdown, payment method/status and any linked POS Sale number.
Before You Start
- The Online Channels menu (including this page) requires the Advanced plan tier or above.
- A real, non-placeholder Business Name should be set under Settings → Shop Info so the auto-generated storefront address is not just your phone number.
- A custom domain requires DNS access for that domain plus contacting BazaarPOS support to complete activation — the in-app form alone does not go live.
Step-by-Step Guide
1 Share your ordering link with customers
- Open the Settings tab and find the indigo "Customer Portal Link" box.
- Click Copy to copy the link, or Open ↗ to preview it yourself in a new tab.
- Share the link anywhere customers already are — WhatsApp broadcast, Instagram bio, a printed QR code at the counter — so they can place advance orders without an app.
2 Fix a phone-number-based storefront address
- Set your real shop name under Settings → Shop Info if you have not already.
- Return to Online Portal → Settings; the emerald "Your Online Store" box shows the amber warning if the address still looks like digits only.
- Click Update address from Business Name (or the plain "Regenerate from Business Name" link once it no longer looks like a phone number) to refresh the public URL.
3 Connect a custom domain
- In the Custom Domain card, type your domain (e.g. www.myshop.com) and click Connect Domain.
- The domain shows an amber "Pending setup" badge — point that domain's DNS records at BazaarPOS and contact support to finish HTTPS activation.
- Once activated it switches to a green "Live" badge; click Remove domain at any time to detach it (confirmation required).
4 Customise the storefront theme
- Pick an Accent Color with the colour swatch or by typing a hex code, and optionally paste a Logo URL.
- Toggle "Show welcome message on home page" and "Show category grid on home page" on or off.
- Reorder the Welcome Banner and Category Grid sections with the ↑/↓ arrows next to each row.
- Click Save Settings at the bottom of the page — theme changes are saved together with the rest of the Settings form, not separately.
5 Set order rules and take the portal on/off
- Set Portal Title and Welcome Message under Branding to whatever you want customers to see.
- Set Minimum Lead Time (days) and Daily Cut-off Time under Order Rules so orders placed too late automatically count as next-day.
- Use the Portal Active toggle to take the whole portal offline temporarily (customers then see a "Portal not available" message) without losing any of the settings above.
- Click Save Settings to apply everything on this tab at once.
6 Process an incoming portal order
- Switch to the Orders tab and filter by status if needed (All/Pending/Confirmed/Preparing/Ready/Completed/Cancelled).
- Click an order row to expand it and see the item list, subtotal, CGST/SGST/IGST, total, payment method/status/channel and any linked Sale number.
- Click the status button (its label changes contextually — Confirm, Start Preparing, Mark Ready, Complete) to advance the order one step at a time.
- Click the ✕ icon to cancel an active order, or to permanently delete an already Cancelled/Completed order from the list.
Every Field & Button, Explained
| Field / Button | What it does |
|---|---|
Customer Portal Link | Auto-generated /#/portal/:tenantId link with Open and Copy buttons — the in-app ordering page customers use. |
Your Online Store | The separate public SEO storefront URL (only shown once provisioned) with its own Open/Copy buttons and a Regenerate/Update-from-Business-Name action. |
Custom Domain card | Input to connect a bring-your-own domain; shows Live (green) once DNS + support activation is complete, or Pending setup (amber) until then; Remove domain link to detach it. |
Accent Color | Hex colour (with swatch picker) used across the public storefront home page. |
Logo URL | Public image URL shown as the storefront logo. |
Show welcome message / Show category grid | Toggles that hide or show the Welcome Banner and Category Grid sections on the storefront home page. |
Home Page Section Order | Up/down arrows reordering the Welcome Banner and Category Grid sections on the public home page. |
Portal Active | Master on/off switch — when off, customers visiting the portal see a "Portal not available" message instead of the store. |
Portal Title / Welcome Message | Branding text shown at the top of the customer-facing portal. |
Minimum Lead Time (days) | How many days ahead a customer must place their order for. |
Daily Cut-off Time | Orders placed after this time each day automatically count as the next day's order. |
Save Settings | Persists everything on the Settings tab — branding, theme, order rules and the Active toggle — in one request. |
Orders tab status filter | All / Pending / Confirmed / Preparing / Ready / Completed / Cancelled chips filtering the order list. |
Order status action button | Advances an order exactly one step along Pending → Confirmed → Preparing → Ready → Completed; label changes to match the next step (Confirm, Start Preparing, Mark Ready, Complete). |
Cancel / Delete (✕) | Cancels an active order, or permanently deletes an already Cancelled/Completed order from the list. |
Tips & Best Practices
- Set your real Business Name under Settings → Shop Info before sharing your storefront link widely, so the address is not just your phone number.
- Keep Minimum Lead Time and Daily Cut-off Time realistic for your kitchen/stock capacity — customers cannot override them from the portal.
- Use the Portal Active toggle instead of deleting settings when you need to pause online ordering for a day (e.g. stocktaking, holiday).
- Only connect a Custom Domain once you are ready to update DNS and contact support — until activation finishes it stays in Pending state and customers should keep using the default link.
Troubleshooting & FAQ
My storefront address is just a string of numbers.
My custom domain has said "Pending setup" for days.
Customers say the portal is "not available".
An order's displayed total doesn't match the line items.
I can't skip an order straight from Pending to Ready.
🧑💻 Developer Notes
Source component(s):
frontend-app/packages/pos-react-lib/src/pages/OnlinePortalPage.jsx
Backend endpoints used:
GET /online-portal/settingsPUT /online-portal/settingsPUT /online-portal/domain/regenerateGET /online-portal/domain/customPOST /online-portal/domain/customDELETE /online-portal/domain/customGET /online-portal/ordersPATCH /online-portal/orders/:id/statusDELETE /online-portal/orders/:id
Related tables (db-core repositories):
OnlinePortalSettingsOnlinePortalOrderCustomDomain
Feature flag key: integrations (requires advanced plan tier or above)
Theme settings are stored server-side as a JSON string (themeConfig) and parsed client-side by parseThemeConfig(), which merges saved values over sensible defaults (accentColor, logoUrl, showWelcomeMessage, showCategoryGrid, sectionOrder) so older stores without a theme configured still render correctly. The tenant ID used to build the portal link is read directly from localStorage (selectedBusinessId, falling back to the stored user object's businessId/tenantId) rather than Redux state.