Embedding the Shop & Cart
The shoppable embed puts a full cart-and-checkout experience onto your own website. Customers browse, add to cart, and check out without ever leaving your page. This guide explains how the cart behaves once it's embedded, the ready-made homepage carousels you can drop in, and the recent checkout improvements.
If you just want to display your menu, see Online Menu Embed first. This page covers the shopping side.
A cart that survives browser privacy blocks
When your shop is embedded on someone else's website, the shop runs inside a frame on your site — and modern browsers (Chrome Incognito, Safari, Firefox) block "third-party cookies" inside frames like this. In the past that could make an embedded cart appear to empty itself.
The embedded cart no longer relies on cookies at all. 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 safely 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 secure servers.
- Carts are remembered for up to 30 days, so a customer can come back later and pick up where they left off.
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.
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.
Homepage product carousels (curated sections)
Beyond the full menu, you can drop curated product sections onto your homepage — a compact carousel or grid of hand-picked 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 — your featured/best-selling items, items on sale, new arrivals, or a specific category. |
data-limit | a number (up to 24) | How many products to show. |
data-layout | carousel or grid | Display as a scrolling carousel or a grid. |
data-title | any text | A custom heading above the section. |
data-shop-url | a link | Where the section's "View All" link should go (e.g. your full shop page). |
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.
Checkout improvements
The checkout page — whether reached from your hosted storefront or an embed — has a few recent upgrades:
Pickup & delivery time slots
Customers choose between As Soon As Possible and Schedule for Later. Choosing to schedule reveals a date picker and a time slot dropdown, so customers can pick a convenient pickup or delivery window. Time slots are shown in friendly 12-hour AM/PM labels (for example "1:30 PM"), not confusing 24-hour times.
Country selector with U.S. states
For stores that ship, the checkout now includes a country selector covering Canada, the United States, and many other countries. When a customer picks the United States, the province field switches to a full list of U.S. states — including the District of Columbia — so shipping addresses are captured correctly. Postal/ZIP labels adjust to match the selected country.
Promo codes in the embed
Promo codes apply correctly inside embedded checkout as well. See Promo Codes for setting them up.
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 is toggled off. You do not have to publicly enable the whole storefront just to embed the cart on another website. See Custom Domains.
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). |
| 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 enabled. |
| 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.