# Webflow Designer Setup

{% embed url="<https://youtu.be/BpiusIR-5AI>" %}
Setting up Flow Phantom in Webflow
{% endembed %}

## 1. Copy an offer template <a href="#id-1-dot-copy-an-offer-template" id="id-1-dot-copy-an-offer-template"></a>

* 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](https://www.flowphantom.com/components).
* 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](https://1510884873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrF7s7mu8hQ9JRwU87L6u%2Fuploads%2FqXRCJkWDv2rXJglvmG3e%2FScreenshot%202023-06-09%20at%207.36.28%20AM.png?alt=media\&token=64b09fa2-838c-4f09-9a72-047934cd6127)

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

![Webflow collection list display limit settings](https://1510884873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrF7s7mu8hQ9JRwU87L6u%2Fuploads%2FqR0kernHxgBocInfiQxk%2FScreenshot%202023-06-09%20at%207.27.29%20AM.png?alt=media\&token=93e6f4d2-024f-4a5c-88da-26893d2fd509)

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

<figure><img src="https://1510884873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrF7s7mu8hQ9JRwU87L6u%2Fuploads%2FjfZCJfMgtR9QS3hwvVeR%2Fdesign%20offer.gif?alt=media&#x26;token=96e96db9-d779-40e0-86d7-b7474e36a509" alt="Binding product values to elements"><figcaption></figcaption></figure>

## 5. **Include Required Elements:**

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

* [**Add to Cart Elemen**](https://university.webflow.com/lesson/add-to-cart)[**t**](https://university.webflow.com/lesson/add-to-cart)**:** Without this, the offer will not be displayed.
* [**Option List' Element**](https://university.webflow.com/lesson/create-product-options-and-variants)**:** 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**](https://university.webflow.com/lesson/cart-overview)**:** 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.

<br>