Webflow Designer Setup

Setting up Flow Phantom in Webflow

1. Copy an offer template

  • Flow Phantom offers are categorized by 'triggers', i.e., customer actions that initiate upsell or cross-sell offers. There are three types of triggers:
    • On load (ol)
    • Add to cart (atc)
    • Post purchase (pp)
  • Begin by going to the Flow Phantom Component page.
  • From there, copy and paste a component with the desired trigger into the Webflow designer. This component will be your design starting point.
  • Make sure you use one of the following supported browsers for copying and pasting: Firefox, Chrome, or Edge.

2. Connect the Products Collection:

  • In the component you copied, find the collection list.
  • Then, connect your own products collection to it.
Connecting a collection list to products

3. Set the Offer Display Limit:

  • The quantity of offers displayed simultaneously is dictated by the number of visible product collection items.
  • To adjust this, select the collection item in the navigator, go to the settings panel, and scroll to "Display Limits". Enable the "Limit items" checkbox.
  • Under the "Show" field, set the desired number of collection items to be displayed.
Webflow collection list display limit settings

4. Design Your Template:

  • Flow Phantom uses your design as a blueprint for your offers.
  • The product visible in the Webflow designer might not be the same as the upsell or cross-sell offer that the customer will see. This is because Flow Phantom will substitute any elements connected to a product at the appropriate time.
  • For more information on binding elements inside collection lists, refer to this Webflow documentation: https://university.webflow.com/lesson/collection-list.
Binding product values to elements

5. Include Required Elements:

Ensure that your product's collection list item includes the following critical elements:
  • Add to Cart Element: Without this, the offer will not be displayed.
  • Option List' Element: If this is absent, it defaults to the standard Webflow e-commerce style. However, this isn't a concern if your products lack option lists.
Also, it's crucial to include the following on your page:
  • Cart Element: This element allows customer cart updates. When designing a 'post-purchase' offer, ensure that the 'Cart' element is present on the checkout page. It can be hidden, as long as it is present.

6. Test:

  • Prior to going live, it's essential to conduct tests of your upsells on your webflow.io site. This preliminary step helps validate that all components are functioning as intended.
  • For testing 'post-purchase' upsells, create a free product and corresponding offer. This allows you to run through the entire purchasing process without incurring any actual costs.
Last modified 3mo ago