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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flowphantom.com/getting-started/webflow-designer-setup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.