Webflow Designer Setup

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

2. Connect the Products Collection:

  • In the component you copied, find the collection list.

  • Then, connect your own products collection to it.

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.

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.

5. Include Required Elements:

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.

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.

NextPriorities

Last updated