Flow Phantom Upsells

Webflow Ecommerce gives you Products, Categories, and SKUs Collections, a cart, and a checkout page. It has no element that offers a related product when a shopper adds an item or clicks purchase. Scripting that behavior yourself means custom code around the cart, with no guarantee it stays compatible with checkout. Flow Phantom Upsells fills that gap with offers built from the same native elements.

Connecting Flow Phantom Upsells with Webflow puts offers in front of shoppers on page load, after add to cart, and after the purchase click. Each offer is a Collection List bound to your Products Collection, so names, images, and prices stay in sync. Flow Phantom skips products already in the cart and only promotes items in stock. Accepting an upsell swaps out the triggering items, while a cross-sell adds to the cart without removing anything.

This pairing suits Webflow freelancers and agency developers who build client stores and want offers that match the site's design system. DTC store owners use it for prompts for frequently bought-together items and accessory suggestions. Digital stores use the post-purchase trigger to upsell a product's premium version. Merchandising owners rank offers in the Flow Phantom dashboard without touching the site.

How to integrate Flow Phantom Upsells with Webflow

What is Flow Phantom Upsells? Flow Phantom Upsells is an upsell and cross-sell tool for Webflow Ecommerce. It adds post-purchase offers and cart-triggered product recommendations using native Webflow elements and templates. Your design is the blueprint, and Flow Phantom substitutes product-connected elements at display time.

Teams use this combination to match offers to the rest of the store and avoid a third-party widget. Offers run as native Webflow components bound to the Products Collection, so they inherit your classes, breakpoints, and interactions. A slide-over or modal can reuse the same animation patterns as the rest of the page. Offer ranking and fallback rules live in the Flow Phantom dashboard, so the site itself stays a layout.

• Copied components let you paste a pre-built offer into Webflow and bind it to your Products Collection without writing code.
• Custom attributes set the trigger type, open/close behavior, and CTA prompt on elements you design yourself.
• The Webflow Data API and webhooks give you full control over the product, inventory, and order data offers draw from, but require server-side development.

Most implementations combine two or more of these methods, depending on setup complexity.

Copy Flow Phantom components into Webflow

Copying a pre-built component is the documented setup path and needs no code. Use it when you want a working offer quickly and plan to restyle it afterward. You need Webflow Ecommerce enabled, which creates the Products, Categories, and SKUs Collections in the Webflow CMS, plus products to promote. Copy-paste works in Firefox, Chrome, or Edge. The component library filters by trigger, and the setup guide walks through each step below.

To set up the integration:

1. Open the component library, filter by Post purchase, Add to cart, or On page load, and click Copy on the template you want.
2. Paste the component onto the page in Webflow. Put add-to-cart offers on product pages and post-purchase offers on the checkout page.
3. Select the Collection List inside the component, open the Collection List settings panel in the right sidebar, and choose your Products Collection from the dropdown.
4. Select the Collection Item in the Navigator, scroll the settings panel to Display Limits, enable Limit items, and set Show to the number of offers you want.
5. Restyle the component with your own classes. Keep the Add to Cart element, because without it the offer will not display. Add an Option List element if your products have variants; without one, the offer falls back to standard Webflow Ecommerce styling.
6. For post-purchase offers, keep a Cart element on the checkout page. You can hide it.
7. Publish to your webflow.io staging domain and test. For post-purchase offers, create a free product and a matching offer so you can run the flow without paying.

The library and Flow Phantom's Webflow profile cover every trigger type:

• Post-purchase templates in four layouts: PP right slide over, PP left slide over, PP modal, and PP bottom slide up
• Add-to-cart templates as right slide over, left slide over, bottom slide up, and modal
• An on-load "Frequently Purchased with" template for product pages
• The number of offers shown equals the number of visible Collection List items, so Display Limits controls density

The integration page at webflow.com also describes an optional route through the Code Embed element, but no Flow Phantom snippet is published, so copied components remain the documented install method.

Configure triggers and prompts with custom attributes

Every Flow Phantom behavior on the page maps to a custom attribute on a Webflow element. The pattern is data-fp-[trigger type]="[label]", with three trigger types: ol for on page load, atc for add to cart, and pp for post purchase. Copied components already carry these attributes, so this method matters when you build an offer from scratch or an attribute gets deleted during a redesign. On-page-load offers update every time the cart changes, add-to-cart offers display right after a product is added, and post-purchase offers display right after the purchase click. The triggers reference lists each attribute.

Set the trigger type on your own component

Build the offer with a Collection List bound to the Products Collection, then tag its wrapper with the trigger attribute. This is how the on-load "frequently bought together" layout and the add-to-cart popup are wired.

To set a trigger:

1. Select the wrapper element of your offer and open its element settings panel.
2. Add a custom attribute such as data-fp-ol="frequently-bought-together" for page load or data-fp-atc="popup" for add to cart. Use the data-fp-pp form for post-purchase.
3. Confirm the component still contains an Add to Cart element and, for post-purchase, that a Cart element sits on the checkout page.

If an offer stops appearing after an edit, a missing trigger attribute is one of the causes the troubleshooting page lists.

Open and close offers with Webflow element triggers

Add-to-cart and post-purchase offers open and close programmatically, and you control the visibility change with Webflow interactions. The data-fp="open" attribute must pair with a Webflow element trigger that sets the component to a display value that is not none. The data-fp="close" attribute sets display to none.

To wire a slide-over:

1. Add data-fp="open" to the element that reveals the offer and attach a Webflow element trigger that changes its display from none.
2. Add data-fp="close" to the dismiss control so the offer hides again.
3. For post-purchase offers, test the close path. Clicking close declines the offer and completes the purchase, so the order is never lost.

Flow Phantom only opens an offer when the priority list yields a suitable product, so a popup with nothing to show stays hidden.

Write custom CTA prompts

The call-to-action text inside an offer can be your own copy rather than a default string. Add data-fp="prompt" to a Webflow text block or header inside the component, as described on the prompts page.

To add a prompt:

1. Drop a text block or heading into the offer component and write the prompt copy.
2. Add the custom attribute data-fp="prompt" to that element.

Prompts are plain Webflow text elements, so they take the same classes and breakpoint overrides as the rest of your type system.

Build with the Webflow Data API and webhooks

Flow Phantom Upsells reads Webflow data. It publishes no API, webhooks, or event tracking, so there is nothing to call on its side. Offers pull from your Products Collection and skip anything out of stock, so the accuracy of that data decides which offers appear. The Webflow Data API lets a backend keep products and inventory current, and webhooks deliver each order to your systems as it lands. Both need a server and a bearer token with the right scopes.

The relevant endpoints sit in Data API v2 at https://api.webflow.com:

• Products and SKUs endpoints handle the items offers draw from, with ecommerce:read for listing and ecommerce:write for creating and updating
• Inventory endpoints handle stock quantities, which decide whether a product qualifies for an offer
• Webflow webhooks trigger ecomm_new_order, ecomm_order_changed, and ecomm_inventory_changed events to your endpoint

An order payload does not flag which items came from a Flow Phantom offer, so offer attribution needs logic you write yourself.

Keep offer inventory current from an external system

Flow Phantom promotes only in-stock products, and products without inventory tracking count as in stock. If a warehouse or ERP owns stock counts, push them into Webflow so sold-out items drop out of offers.

To update inventory:

1. Create a site token or OAuth app with the ecommerce:write scope, per the scopes reference.
2. Call GET /v2/sites/{site_id}/products to find the SKU collection ID and the SKU item ID for each product.
3. Send PATCH https://api.webflow.com/v2/collections/{sku_collection_id}/items/{sku_id}/inventory with either an absolute quantity or an incremental updateQuantity:

{ "updateQuantity": -1 }

The inventory path uses /v2/collections/. The orders and products endpoints use the site prefix.

Capture orders with the ecommneworder webhook

Webflow Ecommerce sends a signed POST to your endpoint when checkout completes, which is the only programmatic record of an order that included an accepted offer. Register the webhook once per site, then verify each request.

To implement this:

1. Call POST https://api.webflow.com/v2/sites/{site_id}/webhooks with the sites:write scope and a body like { "triggerType": "ecomm_new_order", "url": "https://example.com/webflow-orders" }.
2. On each request, read the x-webflow-timestamp and x-webflow-signature headers. Compute a SHA-256 HMAC over timestamp + ":" + JSON.stringify(request_body) with your secret and compare it to the signature.
3. Reject requests whose timestamp is older than 5 minutes, because they may be replays, as the webhooks guide explains.
4. Read purchasedItems, purchasedItemsCount, customerInfo, and totals from the payload and write them to your order system.

The status field carries one of pending, unfulfilled, fulfilled, disputed, dispute-lost, or refunded, so the same handler can process ecomm_order_changed events later.

What can you build with the Flow Phantom Upsells Webflow integration?

• Frequently bought together on product pages: Tag a Collection List with data-fp-ol="frequently-bought-together" below the add-to-cart button. A fashion store shows a belt next to a pair of jeans, and the list refreshes each time the cart changes.
• Add-to-cart slide-over: Paste the add-to-cart right slide over template and bind it to the Products Collection. When a shopper adds a camera body, the panel slides in with a lens. It skips anything already in the cart.
• Post-purchase offer page: Place the PP modal on the checkout page with a hidden Cart element. After the purchase click, the modal offers one more product; close declines it and completes the order, and a digital product without shipping info falls back to a non-shipping offer.
• Premium upgrade upsell: Configure an upsell rather than a cross-sell for a digital store. Accepting it removes the standard edition from the cart and replaces it with the premium version.