Storefront
The Storefront is a customer-facing website that showcases your products, deals, and store information. Unlike the TV Menu Board (which displays on in-store screens), the Storefront is a full web page accessible to anyone via your store's URL or a custom domain.
Enabling the Storefront
- Navigate to Settings > Edit Settings.
- Enable the Storefront feature flag.
- Navigate to Storefront in the admin panel.
- Configure your theme, sections, and content.
- Toggle the storefront On to make it publicly accessible.
See Feature Flags for details on enabling features.
Themes
The storefront comes with five pre-built themes that control the overall look and feel:
| Theme | Description |
|---|---|
| Modern | Clean lines with a contemporary aesthetic |
| Clean | Minimalist and uncluttered design |
| Bold | High-contrast with strong visual elements |
| Warm | Earthy tones with an inviting feel |
| Minimalist | Maximum whitespace, content-focused |
Select a theme from the Storefront settings page. You can further customize colors and fonts within any theme.
Custom Colors
| Setting | Description |
|---|---|
| Primary Color | Main brand color used for buttons and headings |
| Accent Color | Secondary color for highlights and accents |
| Background Color | Page background color |
| Text Color | Default text color |
Custom Fonts
| Setting | Description |
|---|---|
| Heading Font | Font used for page headings and titles |
| Body Font | Font used for body text and descriptions |
Sections
The storefront is built from configurable sections that you can enable, disable, and reorder.
Hero Section
The main banner at the top of the storefront page.
| Field | Description |
|---|---|
| Heading | Large headline text |
| Subtext | Supporting text below the heading |
| CTA Text | Call-to-action button text (e.g., "Shop Now") |
| CTA Link | Where the button links to |
| Image | Hero background or banner image |
Featured Products
A showcase of selected products.
| Field | Description |
|---|---|
| Title | Section heading (e.g., "Featured Products") |
| Count | Number of products to display |
| Source | How products are selected (e.g., newest, popular, manual) |
Categories
A grid of product categories for browsing.
| Field | Description |
|---|---|
| Column Count | Number of columns in the category grid |
Deals
A section highlighting current promotions and sale campaigns.
| Field | Description |
|---|---|
| Title | Section heading (e.g., "Today's Deals") |
Store Info
Store details including address, hours, and optional map.
| Field | Description |
|---|---|
| Show Map | Display a map with store location |
| Show Hours | Display business hours |
About
An about-your-store section with text and optional image.
| Field | Description |
|---|---|
| Text | About section content |
| Image | About section image |
Reordering Sections
Drag and drop sections to change the order they appear on the storefront. You can also disable any section you do not want to display by toggling it off.
Age Gate
For stores selling age-restricted products (e.g., cannabis), you can enable an age verification gate:
- Enable Age Gate in the storefront settings.
- Set the Minimum Age (e.g., 19).
- Visitors must confirm their age before viewing the storefront content.
Announcement Bar
Display a banner at the top of the storefront with a promotional message or notice.
| Field | Description |
|---|---|
| Enabled | Show or hide the announcement bar |
| Text | The announcement message |
| Background Color | Bar background color |
| Text Color | Bar text color |
Footer
Configure the storefront footer with legal text and social media links.
| Field | Description |
|---|---|
| Legal Text | Footer legal/copyright text |
| Instagram profile URL | |
| Facebook page URL | |
| Twitter/X profile URL | |
| TikTok | TikTok profile URL |
Custom Domain
You can connect a custom domain to your storefront (e.g., shop.yourbusiness.com).
Setup
- Enter your custom domain in the storefront settings.
- Add a CNAME record in your domain's DNS settings pointing to your Brother POS storefront URL.
- Click Verify Domain in the storefront settings.
- Once verified, customers can access your storefront via the custom domain.
Custom domains require the Commerce store tier. If your store is on the Free tier, upgrade to use this feature.
If you change the custom domain, the verification status resets and you must re-verify the new domain.
Online Ordering (Commerce Tier)
Stores on the Commerce tier can enable online ordering, allowing customers to browse products, add items to a cart, and place orders directly from the storefront.
Online ordering features (cart, checkout, order management) require the Commerce store tier.
Product Browsing
Customers can browse products by category, view product details, and see real-time stock availability. The storefront respects your store's product visibility settings — only active, in-stock products appear.
Shopping Cart
Customers can add products to a session-based shopping cart:
- Add items by clicking product cards on the menu or category pages.
- Adjust quantities using +/- buttons or by entering a specific amount.
- Remove items from the cart individually or clear the entire cart.
- Cart totals are calculated using the same CartCalculator as the POS register, ensuring consistent tax and pricing.
- Cart contents persist during the browsing session but are cleared after placing an order.
Checkout
The checkout page collects customer and fulfillment information:
| Field | Description |
|---|---|
| Customer Name | Name for the order |
| Phone | Phone number (used to match existing customers) |
| Email address for order confirmation | |
| Fulfillment Method | Pickup or Local Delivery (if enabled) |
| Special Instructions | Optional notes for the order |
Fulfillment Options
| Method | Description |
|---|---|
| Pickup | Customer picks up the order at the store |
| Local Delivery | Order is delivered to the customer (requires delivery zones configured) |
When Local Delivery is selected, the customer enters a delivery address and postal code. The system matches the postal code to a delivery zone and calculates the delivery fee automatically.
Scheduled Orders
Customers can choose between:
- ASAP — order processed immediately.
- Scheduled — select a future date and time for pickup or delivery.
Order Flow
- Customer places an order on the storefront.
- The system creates a pending sale with
source: online. - Stock is reserved for 48 hours via the stock reservation system.
- The store is notified in real time, so staff see the order the moment it comes in.
- A confirmation email is sent to the customer (if email provided).
- The order appears in the admin Online Orders panel for staff to process.
- Staff can accept, prepare, and fulfill the order from the admin interface.
Customer Matching
When a customer places an order, the system automatically:
- Searches for an existing customer by phone number first, then email.
- Updates missing fields (name, email) on existing customer records.
- Creates a new customer record if no match is found.
This means repeat customers are automatically linked to their previous purchase history without needing to create an account.
Stock Checking
Before completing an order, the system verifies stock availability for each item. If a product is no longer available in the requested quantity, the customer is redirected back to the cart with an alert message. This prevents overselling.
Embeddable Shop & Cart
Instead of (or in addition to) sending customers to your hosted storefront, you can embed your shop directly into an existing website -- your own WordPress, Squarespace, Wix, or any custom site. The embed drops in with a single script tag and brings a full, self-contained cart experience to the host page.
Embed modes
| Mode | Script attribute | What it does |
|---|---|---|
| Inline shop | (default) | Browsable product menu with full cart and checkout. |
| Inline menu | data-mode="menu" | Browse-only product menu -- no cart, no checkout. |
| Popup button | data-display="popup" | A button that opens the shop or menu in a popup. |
Installing the embed
Paste the script tag into your site's HTML where you want the shop to appear:
<script src="https://yourstore.brotherpos.ca/shop/embed.js" async></script>
<div data-bpos-shop></div>
For a browse-only menu, add data-mode="menu" to the script tag. The product menu renders inside a responsive iframe that auto-sizes to its content.
Two companion pages cover embeds in depth: Online Menu Embed (menu-only embeds, per-section/category scoping, and dark mode) and Embedding the Shop & Cart (the shoppable cart, homepage carousels, and checkout improvements).
A cookieless cart
When your shop is embedded on another website, modern browsers (Chrome Incognito, Safari, Firefox) block third-party cookies inside the frame — which used to make an embedded cart look like it emptied itself. The embedded cart no longer relies on cookies: each visitor gets a private, random cart token, and the cart is kept safely on our servers under that token. The cart persists across your pages, in private/incognito windows, and in browsers that block third-party cookies — for up to 30 days. It's fully automatic; there's nothing to configure. See Embedding the Shop & Cart for details.
The cart experience
When the embed runs in shop mode, it adds a complete cart to the host page (not just inside the menu iframe), because the menu iframe grows to its full content height and nothing inside it can stay pinned to the screen:
- Cart button with a live count -- a button that shows the current item count and stays with the menu as customers scroll. Clicking it opens the cart.
- Slide-in cart drawer -- a fixed-height panel that slides in from the right, holding the real cart page with line items, a running total, and the checkout button. It scrolls in its own viewport like a normal cart, and closes via the backdrop, the close button, or the
Esckey. - Add to cart without reloading -- items are added instantly (no page reload), and an "Added to cart" toast confirms each add.
- "Continue Shopping" -- inside the drawer, this simply closes the drawer and returns the customer to the menu, rather than navigating away.
- Everything stays in sync -- with several shop pieces on one page (e.g. a menu plus product carousels), adding an item anywhere updates the cart count on all of them at once.
Host cart API
For sites that want to drive their own header cart or a custom "View Cart" button, the embed exposes a small JavaScript API on the host page:
| Hook | Description |
|---|---|
window.BposShop.openCart() | Opens the slide-in cart drawer. |
window.BposShop.closeCart() | Closes the cart drawer. |
bpos:cart window event | Dispatched on every cart change with detail { count, qty, total, currency }, so your site can render its own live cart badge and subtotal. |
To use your own cart button instead of the built-in floating one, opt out of the floating button with data-floating-button="false" on the script tag, then call window.BposShop.openCart() from your button's click handler and listen for the bpos:cart event to keep your badge in sync.
The embeddable shop and menu work on a connected custom domain even when the full storefront is toggled off. TLS certificates are issued for embed-only custom domains as long as your store offers a shop or menu embed -- you do not have to publicly enable the whole storefront just to embed the cart elsewhere.
Storefront vs. Menu Board
| Feature | Storefront | Menu Board |
|---|---|---|
| Audience | External customers (web) | In-store customers (TV screens) |
| Access | Public URL or custom domain | Local network or TV display |
| Interactivity | Browsable pages with navigation | Read-only product display |
| Sections | Hero, products, categories, deals, about, store info | Product grid with categories |
| Theme support | 5 themes with full customization | Display-optimized layout |
| Age gate | Optional | Not applicable |
What's Next?
- Online Menu Embed -- Put your live menu on your own site, scoped by section or category, with a dark-mode option.
- Embedding the Shop & Cart -- The shoppable cart, homepage carousels, and checkout improvements.
- Analytics & Tracking -- Add Google Analytics, Facebook Pixel, or GTM.
- Promo Codes -- Create discount codes for storefront customers.
- Abandoned Cart Recovery -- Recover lost sales automatically.
- Product Reviews -- Enable and moderate customer reviews.
- Product Image Gallery -- Add multiple images to product pages.
- Feature Flags -- Enable the storefront feature.
- Menu Board -- In-store TV product display.
- General Settings -- Store name, address, and branding.