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.

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.

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.

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.