Embedding the Shop & Cart
Use this page to let customers add to cart and check out right on your own website, and to add product carousels (like Best Sellers) to your homepage.
Quick steps
- Make sure the Storefront is on and Online Ordering is switched on for it — otherwise there are no Add to Cart buttons.
- Go to Settings → Edit Settings → Sales & Integrations and click Get embed code & instructions → under Online Menu (embed).
- On the Online Menu Embed page, copy the shoppable snippet (or use Build a custom embed and set Mode to shoppable).
- Paste it into an HTML or Code block on your website — on every page where customers shop, so the cart follows them.
- Open your site in a private (incognito) window, add something to the cart, and move between pages to check the cart stays.
Common questions
My cart keeps emptying on my website. It shouldn't — the embedded cart doesn't rely on browser cookies. Check the same snippet is on every page, and that the customer isn't switching browsers or devices (carts are per browser).
How long is a cart kept? 30 days after the customer last changed it, in the same browser.
Can I use my website's own cart button? Yes. Whoever builds your website can hide the built-in button and use the cart hooks described below.
Can I put a "Best Sellers" carousel on my homepage?
Yes. Add a snippet with data-section="bestsellers" (it shows products marked Featured). See the carousel details below.
More detail: the cookieless cart
A cart that survives browser privacy blocks
When your shop is embedded on another website, the shop runs inside a frame on that site — and modern browsers (Chrome Incognito, Safari, Firefox) block "third-party cookies" inside frames like this. That could make an embedded cart appear to empty itself.
The embedded cart doesn't rely on cookies. Instead, each visitor's browser is given a private, random cart token the first time they land on your page, and their cart is kept on our servers under that token. The result:
- The cart persists as customers move between pages of your site, even in private/incognito windows and in browsers that block third-party cookies.
- Nothing sensitive is stored on your site — the token is just a random key; the actual cart lives on our servers.
- Carts are remembered for 30 days after the customer last changed them, so a customer can come back later and pick up where they left off (as long as they use the same browser).
This all happens automatically — there is nothing for you to configure. It applies to embeds on your own website; your hosted storefront works exactly as it always has.
If you've ever heard "my cart keeps emptying on my website," this is the fix. The cookieless cart works the same across Chrome, Safari, Firefox, and incognito windows.
More detail: the cart on your page, and driving your own cart button (for website builders)
The cart experience on your page
In shoppable mode the embed adds a complete cart to the host page (your website), not just inside the menu frame:
- Add to cart, instantly. Clicking "Add to Cart" on a product adds it without reloading the page, and a small "Added to cart" toast confirms it.
- Cart button with a live count. A cart button shows the current number of items and stays with the menu as customers scroll. Clicking it opens the cart.
- Slide-in cart drawer. A panel slides in from the right holding the real cart — line items, running total, and the checkout button — and scrolls in its own space like a normal cart. Close it with the backdrop, the close button, or the
Esckey. - "Continue Shopping" does the right thing. Inside the drawer, "Continue Shopping" simply closes the drawer and returns the customer to the menu behind it, instead of navigating away.
- Everything stays in sync. If you have several shop pieces on one page (for example a menu plus a couple of product carousels), adding an item anywhere updates the cart count on all of them at once.
Drive your own cart button
If your website already has its own header cart or a "View Cart" button, the embed exposes a small set of hooks so you can drive it:
| 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 button instead of the built-in one, add data-floating-button="false" to the shop script tag, call window.BposShop.openCart() from your button's click handler, and listen for the bpos:cart event to keep your badge current.
More detail: homepage product carousels
Homepage product carousels (curated sections)
Beyond the full menu, you can drop curated product sections onto your homepage — a compact carousel or grid of products that links through to your full shop. These are great "teasers" that pull people into shopping.
<script src="https://yourstore.trafficstores.ca/shop/embed.js"
data-section="bestsellers" async></script>
| Attribute | Values | What it shows |
|---|---|---|
data-section | bestsellers, on_sale, new, or category:1793 | Which products to feature: bestsellers shows the products you have marked as Featured; on_sale shows products in your current automatic discount sale campaigns; new shows your newest products; category: followed by a category's number shows that category (it must be set to show on your storefront). |
data-limit | a number | How many products to show. Defaults to 8; up to 24, or up to 200 for a category: section. |
data-layout | carousel or grid | Display as a scrolling carousel (the default) or a grid. |
data-title | any text | A custom heading above the section. |
data-shop-url | a full web address starting with https:// | Where the section's "View All" link should go (e.g. your full shop page). |
data-hide-view-all | true | Hides the "View All" link, so the section doesn't link out to your full menu. |
You can place several different sections on the same page — for example a Best Sellers carousel and an On Sale carousel. Each one is self-contained, and they all share the same cart, so items added from any carousel land in the same order. By default the carousels are shoppable teasers and don't show their own floating cart button (the full shop page carries the cart); you can opt one in with data-floating-button="true".
Featuring your best-selling bundles or discounted items right on your homepage is a proven way to lift order value. Point "View All" at your full shop so browsers can keep shopping.
More detail: checkout options
Checkout options
The checkout page — whether reached from your hosted storefront or an embed — includes:
Pickup & delivery times
If your store lets customers choose when they need their order, checkout asks When do you need it? with As Soon As Possible or Schedule for Later. Choosing to schedule reveals a Date picker and a Time dropdown in half-hour steps, shown in friendly 12-hour AM/PM labels (for example "1:30 PM").
Country selector with U.S. states
For stores that ship, choosing Shipping shows a Country selector (Canada is pre-selected; the United States and a range of other countries are listed). When a customer picks the United States, the province field switches to a list of U.S. states — including the District of Columbia — and the postal code label changes to ZIP Code.
Promo codes in the embed
Promo codes apply inside embedded checkout as well. See Promo Codes for setting them up.
More detail: embeds with the storefront switched off
Custom-domain embeds work even with the storefront off
The embeddable shop, menu, and carousels work on a connected custom domain even when your full storefront website is toggled off, as long as your shop or menu is switched on. You do not have to publicly enable the whole storefront just to embed the cart on another website. See Custom Domains.
More detail: troubleshooting and best practices
Troubleshooting
| Problem | Fix |
|---|---|
| The cart seems to empty between pages | This shouldn't happen with the cookieless cart. Confirm the same shop snippet is present on each page, and that the customer isn't switching between different browsers/devices (carts are per browser). |
| Nothing appears at all for visitors | Your website builder or a security plugin is probably stripping the script. Use the no-script version from the Setup Wizard — see When your website builder removes scripts. |
| No "Add to Cart" buttons appear | You're likely using the read-only menu (data-mode="menu"). Remove data-mode="menu" for the shoppable version, and make sure Online Ordering is switched on. |
| I want my own cart button | Add data-floating-button="false" and use the host cart hooks. |
| A carousel's "View All" goes to the wrong place | Set data-shop-url to your full shop page's address. |
| Customer can't pick a U.S. state | Make sure they selected United States in the country dropdown first; the state list appears after the country is chosen. |
Best Practices
- Use the same snippet on every page so the cart follows the customer across your site.
- Lead with a carousel. A Best Sellers or On Sale carousel on the homepage draws shoppers into the full menu.
- Keep checkout simple. Only enable the fulfillment methods (pickup, delivery, shipping) you actually offer.
- Test in an incognito window. It's the quickest way to confirm the cart persists where third-party cookies are blocked.
What's Next?
- Online Menu Embed — the menu-only embed, section/category scoping, and dark mode.
- Storefront — your full customer-facing website and its sections.
- Promo Codes — discount codes that work in embedded checkout.
- Abandoned Cart Recovery — win back customers who don't finish checkout.
- Custom Domains — connect your own web address.
- Analytics & Tracking — measure traffic and conversions.