Webflow Designer Setup

Last updated 1 year ago

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 .
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.

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.

Ensure that your product's collection list item includes the following critical elements:

Also, it's crucial to include the following on your page:

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 updated 1 year ago

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 .
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.

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: .

Ensure that your product's collection list item includes the following critical elements:

: Without this, the offer will not be displayed.
: 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:

: 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.