Webflow Designer Setup
Setting up Flow Phantom in Webflow
- 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)
- 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:
- 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.
Last modified 3mo ago