Storefront
Use this page to set up your store's customer-facing website — its look, homepage sections, age gate and online ordering.
Quick steps
- Go to Settings > Edit Settings, open the Sales & Integrations tab, tick Enable Storefront and click Update Settings.
- Open Storefront from the admin menu. Click Setup Wizard for a quick first draft, or Customize to pick a theme, colours and sections yourself.
- While you build, switch Under Construction mode on so visitors see a "coming soon" page.
- Under Features, turn on Online Ordering if customers should be able to order (or Browse-Only Catalog to just show products).
- When you're ready, switch Under Construction mode off and make sure Storefront Status is ON.
Common questions
A product isn't showing online. It must be active, set to show on the storefront, and have a price. Out-of-stock products are hidden unless you choose to show them as sold out.
Where do online orders go? To Orders > Online Orders, where staff mark them ready and complete them. See Online Orders.
Can customers pick delivery or shipping? Yes, if you've switched those on and set up zones. Otherwise they see only In-Store Pickup.
Can I put the shop on my own website? Yes. Paste the embed code into your site — see Embeddable Shop & Cart.
Online Ordering says Upgrade. Online ordering depends on your plan. The Your Plan card shows which one you're on.
More detail: turning it on, Under Construction mode and your plan
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 website anyone can visit at your store's web address or a custom domain.
Enabling the Storefront
- Go to Settings > Edit Settings and open the Sales & Integrations tab.
- Tick Enable Storefront and click Update Settings.
- Open Storefront from the admin menu.
- Set up your theme, sections, and content (the Setup Wizard button can do a first pass for you).
- Under Storefront Status, switch the storefront ON to make it publicly visible.
Under Construction mode
While you're still building the site, switch Under Construction mode on (in the Storefront Status card). Your full storefront is hidden and visitors see a simple "coming soon" page with your name, logo and contact info. Switch it off when you're ready to go live.
The Storefront Status card says "Your storefront is live and visible to the public." when the storefront is on. If Under Construction mode is on too, it says "Your storefront is on, but Under Construction mode is showing visitors a holding page."
Your plan
The Your Plan card shows which storefront plan you're on: Included with your POS plan, Commerce — online ordering or Free — menu only.
See Feature Flags for more on turning features on.
More detail: themes, colours and fonts
Themes
Pick a theme in the storefront editor under Theme. Each theme sets the overall look and a starting colour palette:
| Theme | Style |
|---|---|
| Modern | Clean & polished |
| Clean | Minimal & elegant |
| Bold | Urban & energetic (dark background) |
| Warm | Earthy & boutique |
| Minimalist | Gallery & editorial |
| Cannabis Island | An extra theme offered alongside the five above |
Brand Colors
Override the theme's colours. Leave a colour blank to keep the theme's own.
| Setting | Description |
|---|---|
| Primary | Main brand colour used for buttons and headings |
| Accent | Secondary colour for highlights |
| Background | Page background colour |
| Text | Default text colour |
Fonts
| Setting | Description |
|---|---|
| Headings | Font used for page headings and titles |
| Body Text | Font used for body text and descriptions |
The editor offers Inter, Playfair Display, Space Grotesk, and System Default.
More detail: homepage sections
Sections
Your homepage is built from sections. In the editor, drag sections to reorder them and click a section to edit it. Each section has a Show on homepage switch, and Add Section adds extras such as a photo gallery, staff members, or customer reviews.
Hero
The main banner at the top of the homepage.
| Field | Description |
|---|---|
| Heading | Large headline text |
| Subtext | Supporting text below the heading |
| Button Text | Text on the call-to-action button (e.g., "Shop Now") |
| Button Link | Where the button goes, e.g. /menu or a full web address |
| Hero Image | Banner image — pick a stock image or upload your own |
Featured Products
A row of highlighted products.
| Field | Description |
|---|---|
| Section Title | Section heading (e.g., "Best Sellers") |
| Show Products From | Featured, Best Sellers, New Arrivals, or On Sale. Best Sellers puts the products that sold the most units in the last 30 days first (a variation's sales count toward its main product), then fills any remaining spots with products that haven't sold, newest first. |
| Number to Show | How many products to display |
Categories
A grid of product categories for browsing.
| Field | Description |
|---|---|
| Grid Columns | Number of columns in the category grid |
Deals
Highlights your current promotions.
| Field | Description |
|---|---|
| Section Title | Section heading (e.g., "Today's Deals") |
Store Info
The "Visit Us" section with your contact details.
| Field | Description |
|---|---|
| Section Title | Section heading |
| Show address / phone number / email / store hours | Choose which details appear |
| Address / Phone / Email | Optional overrides. Leave blank to use your store settings. |
Store hours are edited in the Store Hours settings panel of the editor.
About
An about-your-store section.
| Field | Description |
|---|---|
| Page Title | Title of the About page |
| About Text | Your story, mission, and what makes you special |
| About Image | Image shown with the text |
| Value Cards | Up to three short cards below the text. Leave a card's title blank to hide it. |
More detail: age gate, announcement bar and footer
Age Gate
For stores selling age-restricted products (e.g., cannabis), you can ask visitors to confirm their age:
- In the storefront editor's settings, switch Age Gate on.
- Set the Minimum age (e.g., 19).
- Visitors must confirm their age before viewing the storefront.
For a cannabis store, Age Gate starts switched on. You can switch it off in the editor if you need to.
If your store sells cannabis, your embedded menu or shop (the one you put on your own website) asks visitors their age too, whether or not this switch is on. If your own website already asks, you can turn the embed's question off. See Online Menu Embed.
Announcement Bar
A banner across the top of the storefront for a promotion or notice.
| Field | Description |
|---|---|
| Show announcement bar | Show or hide the bar |
| Message | The announcement text |
| Link URL | Optional page or web address the bar links to |
| Background | Bar background colour |
| Text Color | Bar text colour |
| Scrolling | Make the message scroll across the bar |
Footer
Set up the footer under Social Media and Footer in the editor settings.
| Field | Description |
|---|---|
| Legal Text | Footer legal/copyright text |
| Instagram, Facebook, X (Twitter), TikTok, YouTube | Links to your social profiles. Each must start with http:// or https://. Cannabis stores also get cannabis-directory links such as Leafly. |
Newsletter Signup
The footer can carry an email signup box. Set it up in the Newsletter card on the Storefront page:
| Setting | Description |
|---|---|
| Enable newsletter signup in footer | Turns the signup box on |
| Webhook URL | Optional. A web address from your email-marketing or automation tool that accepts new subscribers. When filled in, every signup is also sent there. |
| Heading / Subtext | The wording above the box (defaults: "Subscribe to our newsletter" / "Get the latest news and updates delivered to your inbox.") |
| Success Message | What shoppers see after signing up (default: "Thanks for subscribing!") |
Click Save Newsletter Settings. The box appears in your footer whenever Enable newsletter signup in footer is ticked, with or without a Webhook URL. Signups are always saved to your own subscriber list. Click View Subscribers to see it.
If you fill in a Webhook URL, it must begin with https://. An http:// address is refused when you save.
More detail: custom domain
Custom Domain
You can connect your own domain to your storefront (e.g., shop.yourbusiness.com). You can also search for and register a new domain, or transfer one you own, from the storefront editor.
Pointing a domain you already own
- In the storefront editor settings, find Custom Domain and enter your domain under Or just point a domain you own here.
- At your domain provider, add an A record pointing to the address shown under the box.
- Click Verify Domain.
- Once verified, customers can reach your storefront at your domain.
Verifying a custom domain requires the Commerce tier.
If you change the custom domain, it is no longer verified and you must verify the new domain.
More detail: online ordering — browsing, cart, checkout and completing orders
Online Ordering
With online ordering, customers can browse products, add items to a cart, and place orders from the storefront. Turn it on with the Online Ordering card on the Storefront page. Whether it is available depends on your plan. If it isn't, the Storefront page says so with an Upgrade link.
If you only want customers to browse, use Browse-Only Catalog instead. It shows your products with no cart or checkout.
Product Browsing
Customers browse products by category and view product details. A product appears only if it is active and set to show on the storefront. A product with no price at all (no base price, and no tier, size or other price it can be sold at) is left off the online menu and can't be bought online, so a till-only or "priced at the counter" item is never checked out for $0.00.
A product is in stock online only when a customer could actually order it: it has stock on hand, or it's allowed to sell below zero (on the product, or for your whole store). This is the same check the cart and checkout make. So a product at zero stock shows Out of Stock with no Add to Cart button, on the menu, on its product page and in search, even if it doesn't track stock. Out-of-stock products are hidden from the menu unless you switch on the option to show them (as sold out) on the Storefront page.
THC and CBD on the Menu
When your store shows THC/CBD, cannabis products show their THC and CBD on the product card and the product page, in the unit you chose next to THC Content and CBD Content on the product:
- % — shown as a share, for example THC: 25.3% on flower.
- mg — shown as an amount, for example THC: 10 mg on an edible or a beverage.
So an edible with 10 mg of THC reads 10 mg online, the same as on its package. To keep THC off your public menus altogether, tick Hide THC % from public listings under Public menu data on the General tab of Settings → Edit Settings.
Shopping Cart
- Add items from the menu or product pages.
- Change quantities or remove items, or clear the whole cart.
- Totals use the same pricing and tax rules as your register.
- A delivery fee or shipping charge is not taxed unless you turn that on: go to Settings > Edit Settings > Sales & Integrations tab and, under Delivery & Shipping Fees, tick Charge tax on delivery and shipping fees. Then the fee is taxed at your store's tax rate: GST and PST if you charge them separately, or your single rate (for example HST). It is never charged the additional tax (such as a vapour tax), which applies to products only. For example, in Saskatchewan (5% GST + 6% PST) a $5.00 delivery fee adds $0.25 GST and $0.30 PST. The checkout summary, the order and the receipt all show it. Orders already placed keep the tax they were placed with.
- The cart is emptied once the order is placed.
Checkout
The checkout page collects customer and fulfillment information:
| Field | Description |
|---|---|
| Name | Name for the order |
| Phone | Phone number (used to match existing customers) |
| Email address for order updates | |
| How would you like to receive your order? | In-Store Pickup, Local Delivery or Ship to Me, whichever your store offers |
| Special Instructions | Optional notes for the order |
Fulfillment Options
| Method | Description |
|---|---|
| In-Store Pickup | Customer picks up the order at the store. Can be switched off under Fulfillment Settings on the Storefront page. |
| Local Delivery | Order is delivered to the customer (requires local delivery switched on and delivery zones set up) |
| Ship to Me | Order is shipped by post or courier (requires Enable Shipping and shipping zones) |
When Local Delivery is selected, the customer enters a delivery address and postal code. The postal code is matched to a delivery zone to work out the delivery fee.
If your store sells cannabis, you can limit Ship to Me to addresses in your store's province. It's off unless you turn it on: go to Settings > Edit Settings > Sales & Integrations tab and, in the Delivery & Shipping section, tick Ship only within my province. When it's on, Ship to Me only accepts addresses in your store's province. The shipping form starts on your province and says "We ship only within Saskatchewan" (or your province). If a customer picks another province or country, a message under the field explains it and the order can't be placed. The same rule is checked again when the order is placed, and no shipping zone can override it, not even one that covers everywhere. Pickup and local delivery are not affected. When it's off, and for stores that don't sell cannabis, you can ship anywhere your shipping zones cover.
Only the methods you have switched on are accepted. If you turn off local delivery or shipping, an order asking for it is refused, even from a customer who had checkout open before you made the change. They see "That delivery option isn't available anymore. Please choose another." and can pick another method. They are never quietly switched to pickup.
When do you need it?
Customers choose between:
- As Soon As Possible: preparation starts right away.
- Schedule for Later: pick a date and time.
You can switch this question off with Scheduled Pickup Times on the Storefront page if you hand every order over at one set time.
Order Flow
- Customer places an order on the storefront.
- A pending order is created and the stock is reserved for 48 hours.
- Staff are alerted in the admin as soon as it comes in, and a new-order email goes to the store.
- The customer is emailed a confirmation (if they gave an email).
- The order appears on the Online Orders page, with a count of pending online orders, for staff to process. Admins and managers open it with the Online Orders button on the Orders page; storefront-only accounts have Online Orders in the side menu. See Online Orders.
Completing an Order in the Admin
AdminManagerOpen the order from Online Orders. Click Mark Ready when it's prepared, then Complete Order once the customer has it. On a delivery order, Complete Order also marks it delivered and closes its stop on the driver's route, the same as Mark Delivered on the Fulfillment page.
If the customer pays when they get the order (pay at pickup, pay on delivery, or e-Transfer), Complete Order first asks How was this order paid?:
| Field | What to choose |
|---|---|
| Payment method | Cash, Card, or e-Transfer (only the ones your store takes) |
| Cash drawer | The open register drawer the payment went into. Required for cash. For card or e-Transfer, pick the register that took it, or choose Not at a register. |
Click Record payment & complete. The payment is recorded on the order and, when you pick a drawer, counted in that drawer's cash count and Z-Report, the same as taking the payment at the register with Load into Register. If no drawer is open, the window says so: open one at the register first to record cash. Afterwards the order shows Paid in person: Cash (or the method you chose) and the register it was recorded at. In the Online Orders list, a completed order reads Paid · Cash (or its method), and a cancelled order that took no money reads Not charged.
An order already paid online (by card, or by eDebit) completes straight away, with no question.
Customer Matching
When a customer places an order without signing in, Brother POS:
- Looks for an existing customer by phone number first, then by email.
- Fills in a missing name or email on the existing customer record.
- Creates a new customer if no match is found.
Repeat customers are linked to their earlier purchases without needing an account. A signed-in customer's order goes on their own account.
Stock Checking
Before an order is placed, stock is checked for every item. If a product is no longer available in the requested quantity, the customer is sent back to the cart with a message, so you don't oversell.
Cannabis Daily Purchase Limit
If your store enforces a daily cannabis purchase limit, checkout checks it too. When the cart, plus anything that customer has already bought today, plus their online orders from today that are still waiting to be picked up or delivered, would go over the limit, the order isn't placed and the customer is sent back to the cart to remove something. See Compliance.
More detail: embedding the shop and cart on your own website
Embeddable Shop & Cart
Instead of (or as well as) sending customers to your hosted storefront, you can embed your shop in a website you already have, such as WordPress, Squarespace, Wix, or a custom site.
Embed modes
| Mode | Script attribute | What it does |
|---|---|---|
| Inline shop | (default) | Product menu with cart and checkout. |
| Inline menu | data-mode="menu" | Browse-only product menu, with no cart or 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.trafficstores.ca/shop/embed.js" async></script>
For a browse-only menu, add data-mode="menu" to the script tag. The menu sits in a frame that grows to fit its content.
Two companion pages cover embeds in depth: Online Menu Embed covers menu-only embeds, section/category scoping, and dark mode. Embedding the Shop & Cart covers the shoppable cart and homepage carousels.
A cart that survives browser privacy blocks
Browsers often block cookies inside an embedded frame, which used to make an embedded cart look like it emptied itself. The embedded cart doesn't rely on cookies. Each visitor's cart is kept on our servers for up to 30 days, so it survives page changes, private windows, and strict browsers. There's nothing to set up. See Embedding the Shop & Cart for details.
The cart experience
In shop mode, the embed adds a complete cart to your own page:
- Cart button with a live count that stays with the menu as customers scroll. Clicking it opens the cart.
- Slide-in cart drawer with line items, a running total, and the checkout button. Close it with the backdrop, the close button, or the
Esckey. - Add to cart without reloading, with an "Added to cart" confirmation.
- "Continue Shopping" closes the drawer and returns the customer to the menu.
- 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.
Host cart hooks
If your site has its own header cart or "View Cart" button, the embed offers these hooks:
| Hook | Description |
|---|---|
window.BposShop.openCart() | Opens the slide-in cart drawer. |
window.BposShop.closeCart() | Closes the cart drawer. |
bpos:cart window event | Fires on every cart change with { count, qty, total, currency }, so your site can show its own live count and subtotal. |
To use your own cart button instead of the built-in one, add data-floating-button="false" to the script tag. Then call window.BposShop.openCart() from your button and listen for the bpos:cart event to keep your badge up to date.
The embeddable shop and menu work on a connected custom domain even when the full storefront is switched off, as long as your store offers online ordering or the browse-only catalog. You don't have to publish the whole storefront just to embed the cart elsewhere.
More detail: storefront vs. menu board
Storefront vs. Menu Board
| Storefront | Menu Board | |
|---|---|---|
| Audience | Customers on the web | Customers in your store |
| Where it shows | Your storefront address or custom domain | TV screens in the store |
| Interactivity | Browsable pages, and ordering if switched on | Display only |
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 and homepage carousels.
- Custom Domains: connect your own web address.
- 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: turn on the storefront feature.
- Menu Board: in-store TV product display.
- General Settings: store name, address, and branding.