Online Menu Embed

Admin Manager

Use this page to show your live product menu on your own website (WordPress, Wix, Squarespace and so on) by pasting in one snippet. Prices, photos and stock update by themselves.

Quick steps

Go to Settings, click Edit Settings, and open the Sales & Integrations tab.
Under Online Menu (embed), click Get embed code & instructions →. (If it isn't on yet, tick Online Menu (embed) first and click Update Settings.)
On the Online Menu Embed page, click Copy next to the snippet you want — the read-only menu is the simplest.
On your website, add an HTML or Code block where the menu should go (WordPress: Custom HTML; Wix: Embed Code; Squarespace: Code) and paste the snippet.
Save or publish the page, then open it in a private window to check the menu shows.

Running WordPress or WooCommerce?

The plugin is usually better than an embed. Click Download WordPress Plugin on the Online Menu Embed page, then in WordPress go to Plugins → Add New → Upload Plugin.

Common questions

The menu shows in my editor but visitors see nothing. Your website builder or a security plugin is removing the script. Use the no-script version instead — see "When your website builder removes scripts" below.

Can customers buy from the embedded menu? Yes, with the shoppable snippet. It needs the Storefront turned on, and Add to Cart buttons only appear when Online Ordering is on. See Embedding the Shop & Cart.

Can I show just one category or one section? Yes. Use Build a custom embed on the Online Menu Embed page to pick a revenue center or category, then copy the snippet it makes.

Visitors are asked their age twice. Your website already asks. In the Age check card, tick Our website already checks age and click Save.

More detail: getting to the page, and read-only vs. shoppable

To open the Online Menu Embed page, go to Settings > Edit Settings > Sales & Integrations and click Get embed code & instructions → under Online Menu (embed).

Enable it first

The Online Menu Embed page is available once you have turned on either Online Menu (embed) or the Storefront. If neither is on, you are sent to Settings to enable one. Your store also needs a website address; if it doesn't have one yet, you are sent to the Storefront page to choose one first. See Feature Flags.

There are two flavours of embed, and the difference is simply whether customers can buy from it:

Embed	Snippet	What customers can do
Read-only menu (recommended)	`data-mode="menu"`	Browse products, prices, and photos. No cart. Great for showcasing your catalogue. Works on any website.
Shoppable menu	(no `data-mode`)	Same menu, plus add-to-cart and checkout right on your site. The page only offers this snippet when the Storefront is enabled, and Add to Cart buttons only appear when Online Ordering is switched on for your storefront.

The read-only menu works even if you never turn on online ordering — it is purely a live "here's what we carry" display.

More detail: installing the embed, and where to paste it

Installing the embed

On the Online Menu Embed page, copy the snippet you want and paste it into your website where you'd like the menu to appear.

Read-only menu:

<script src="https://yourstore.trafficstores.ca/shop/embed.js" data-mode="menu" async></script>

Shoppable menu:

<script src="https://yourstore.trafficstores.ca/shop/embed.js" async></script>

The menu renders inside a responsive frame that automatically grows to fit its contents, so it looks at home on any page width.

Snippets point at your storefront address

Every snippet is built to point at your public storefront address (for example yourstore.trafficstores.ca), never the admin site. The page fills this in for you automatically — just copy and paste. If you copy a snippet by hand from somewhere else, make sure it uses your storefront web address.

Where to paste it

Website builder	How to add it
WordPress	Edit the page → add a Custom HTML block → paste the snippet → Update.
Wix	Add → Embed Code → Embed HTML → paste the snippet → Publish.
Squarespace	Add Block → Code → paste the snippet → Save.
React / Next.js	A raw `<script>` tag written in JSX won't run. Inject it from an effect (or use `next/script`). See the React example below.

Using WordPress or WooCommerce?

If your site runs on WordPress or WooCommerce, our plugin is usually the better choice. It syncs your products natively — pricing, photos, and categories — instead of an embedded frame, so the menu looks like part of your site and stays in sync automatically. Click Download WordPress Plugin on the Online Menu Embed page, then in WordPress go to Plugins → Add New → Upload Plugin, choose the .zip, and activate it.

More detail: section menus, custom embeds and category-scoped embeds

Section menus (one page per area)

If your store is organized into revenue centers (for example a dispensary counter and a separate accessories or café area), you can embed just one section on each page of your site. Each snippet shows only that revenue center's products.

<script src="https://yourstore.trafficstores.ca/shop/embed.js"
        data-mode="menu" data-revenue-center="12" async></script>

The Section menus card lists a ready-made, copy-and-paste snippet for each revenue center, along with a Preview button that loads that section into the Live preview panel so you can see what it will show before you paste it. The card appears once you have two or more active revenue centers.

See Revenue Centers for how to organize products into sections.

Build a custom embed

The Build a custom embed tool lets you assemble a snippet exactly the way you want it. Pick your options and the snippet — and the live preview — update instantly:

Option	Choices	What it does
Revenue center	All revenue centers, or a single center	Limit the embed to one area of your store.
Category	All categories, or a single top-level category	Show just one product category (e.g. only Edibles).
Mode	Read-only menu / Shoppable (cart)	Whether customers can add to cart. (Shoppable is greyed out until the Storefront is enabled.)
Theme	Site theme / Dark / Light	Override the look for this embed only — see below.

The finished snippet appears below the options; copy it with one click. The Live preview panel shows the same embed a visitor would see, so you can confirm it looks right before adding it to your site.

Category-scoped embeds

To show a single category anywhere, add data-category with that category's number:

<script src="https://yourstore.trafficstores.ca/shop/embed.js"
        data-mode="menu" data-category="1793" async></script>

Use Choose products & categories at the top of the Online Menu Embed page to control which categories and products are eligible to appear in any embed.

More detail: dark mode

Dark mode for dark sites

By default an embed picks up your storefront's normal theme. If your website has a dark design, a light menu can look out of place. The theme override lets you drop a dark (or light) version of the menu onto that one page — without changing your storefront's look everywhere else.

Add data-theme to the snippet:

Value	Result
(left out / "Site theme")	Uses your storefront's configured theme.
`bold`	Dark menu — pairs well with dark websites.
`clean`	Light menu.

<script src="https://yourstore.trafficstores.ca/shop/embed.js"
        data-mode="menu" data-theme="bold" async></script>

The theme only applies to that embed. Your hosted storefront and every other embed keep their own themes.

More detail: age check

Age check

AdminManager

If your store sells cannabis, the embedded menu (read-only or shoppable) asks each visitor "Are you 19 years of age or older?" before it shows any products. It uses the minimum age from your storefront's Age Gate setting (19 if you haven't set one).

Yes shows the menu. The answer is remembered in that visitor's browser, so they aren't asked again on every page.
No shows a message that they must be of legal age, and the menu stays hidden.

This is on by default for cannabis stores. If your own website already asks visitors their age, turn the embed's question off so nobody is asked twice:

Open the Online Menu Embed page.
In the Age check card, tick Our website already checks age.
Click Save. The card then reads "Right now: the embedded menu does not ask visitors their age."

Untick it and save to turn the question back on. Stores that don't sell cannabis don't see this card, and their embeds never ask.

note

Only turn this off if your website really does check age before visitors can reach the menu. You are responsible for age-gating a cannabis menu.

More detail: React / Next.js, and the popup button (for website builders)

React / Next.js

A <script> tag pasted directly into JSX will not run — React ignores injected scripts. Instead, add the script from an effect and let it mount into a container div. The Online Menu Embed page shows this example with your own address filled in:

import { useEffect } from "react";

export default function ShopMenu() {
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "https://yourstore.trafficstores.ca/shop/embed.js";
    s.async = true;
    s.dataset.mode = "menu";
    document.getElementById("brotherpos-shop")?.appendChild(s);
  }, []);

  return <div id="brotherpos-shop" />;
}

In Next.js, the cleaner option is the built-in Script component:

import Script from "next/script";

<Script src="https://yourstore.trafficstores.ca/shop/embed.js"
        data-mode="menu" strategy="afterInteractive" />

Instead of showing the menu inline, you can show a button that opens the menu in a popup:

<script src="https://yourstore.trafficstores.ca/shop/embed.js"
        data-display="popup" data-button-text="Browse Our Products"
        data-button-color="#3b82f6" async></script>

Attribute	Purpose
`data-display="popup"`	Show a button that opens the menu in an overlay.
`data-button-text`	The text on the button. If left out, it reads "View Our Menu" (read-only) or "Shop Now" (shoppable).
`data-button-color`	The button's colour, as a hex code (e.g. `#3b82f6`) or `rgb(...)`. Anything else falls back to blue.

More detail: when your website builder removes scripts

When your website builder removes scripts

Some website builders and WordPress security plugins quietly strip <script> tags when a page is saved or published — Elementor's Custom HTML block is a common example. The tell-tale sign: the page looks right in the editor, or while you're logged in to your own site, but visitors see nothing where the menu should be.

For those sites there is a version that uses no script at all:

In the admin, go to Storefront and click Setup Wizard.
Choose I already have a website and continue to the Add to Your Website screen.
Find the feature you want to embed (for example Product Menu or Online Shop) and open Add directly to your page.
Click Nothing showing up? Some website builders remove scripts — use this instead.
Click Copy and paste that code into your page's HTML block instead of the script.

It looks like this:

<iframe src="https://yourstore.trafficstores.ca/menu?embed=true&mode=menu"
        style="width:100%;border:0;min-height:1200px" title="Product Menu"></iframe>

Keep the embed=true part

If you write your own frame, the address must include embed=true. Without it, your storefront refuses to load inside another website and visitors see a "refused to connect" message.

The no-script version cannot grow to fit its contents the way the script version does, so give it plenty of height or let it scroll.

A shoppable no-script embed still takes orders: a cart bar sits at the top of the frame with View Cart (with the item count) and Checkout, and customers check out right inside the frame. The floating cart button and the cart hooks described in Embedding the Shop & Cart live on your own page, so they only come with the script version — use it wherever your site allows.

More detail: troubleshooting and best practices

Troubleshooting

Problem	Fix
The menu doesn't appear	Make sure you pasted the snippet into an HTML/Code block, not a plain text block. If it still shows nothing, your builder or a security plugin is probably removing the script — use the no-script version.
It shows the wrong products	Check the revenue center or category number in the snippet, and confirm those categories are set to show under Choose products & categories.
The "Shoppable" option is greyed out	The shoppable embed needs the Storefront. Enable it in Settings first.
The shoppable menu has no Add to Cart buttons	Online Ordering is not switched on for your storefront.
A `<script>` tag in my React page does nothing	React won't run injected scripts — use the React/Next.js approach.
The menu clashes with my dark site	Add `data-theme="bold"` for a dark menu.
Visitors are asked their age twice	Your website already asks. Tick Our website already checks age in the Age check card.

Best Practices

Start with the read-only menu. It's the simplest, works everywhere, and needs nothing beyond the Online Menu feature. Add the shoppable version once you're ready to take orders on your site.
Use section menus for multi-area stores. Putting one revenue center on each relevant page keeps each page focused.
Preview before you publish. The live preview and per-section Preview buttons show exactly what customers will see.
Match your site's look. Use the theme override so the menu blends in with a dark or light design.
Prefer the WordPress plugin on WordPress/Woo sites for the most native-looking result.

What's Next?

Embedding the Shop & Cart — the shoppable cart, cross-page cart syncing, and homepage product carousels.
Storefront — your full customer-facing website.
Revenue Centers — organize products into sections you can embed separately.
Custom Domains — connect your own web address.
Promo Codes — discount codes that work in the embed too.
Feature Flags — enable the Online Menu or Storefront.

Quick steps​

Common questions​

Menu embed vs. shoppable embed​

Installing the embed​

Where to paste it​

Section menus (one page per area)​

Build a custom embed​

Category-scoped embeds​

Dark mode for dark sites​

Age check​

React / Next.js​

Popup button​

When your website builder removes scripts​

Troubleshooting​

Best Practices​

What's Next?​