Webflow Designer Setup
Last updated
Last updated
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.
In the component you copied, find the collection list.
Then, connect your own products collection to it.
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.
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.
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.
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.
