Use Ecommerce in the Flow

Show Products

Within your flow, select a message step to start. Select the ecommerce tab, then select products.

Now you’ll see the new step open.

The next step is to configure the design, of how you want to display your ecommerce products

Product gallery settings

Due to the fact that Facebook allows only 10 cards displayed at one time, you might need to apply a filter to narrow down the products.

• Choose how many products to show from 1 to 10
• Select a sorting condition according to the user’s choice
• Set a filter with as many conditions as needed.
• Image ratio

Add to Cart

The next step enables you to add an ‘Add to cart’ button below each store item.

Add a button title and select next step

Now select Add to Cart from the actions display panel

View Cart

Optional ‘Add a new button called view cart’ This will show your visitors what is in their carts.

Find “Shopping Cart” under “Ecommerce”, click “Edit”.

The edit page of “showing cart” is similar to the “showing product’s.

If a customer picks more than 10 products but below 20, try using “Newest” to show the first 10 and “Oldest” to show the rest. It’s rare but what if it’s more than 20? Maybe try listing products by price range or first letter. Alternatively, you can also customize some Send Message steps to show the cart rather than using the “showing cart” function. Access cart information in “SHOP” JSON variable and “$.cart.num” of “SHOP” for items number in the cart.

Remove from cart

Select “Remove from cart” when the button is pressed. You might want to use a Go to step to go to the cart again to refresh, since there are quantities shown with products that differ from showing a static menu.

Now your basic flow should look like the image below.

Empty Cart

Create a new button in the shopping cart block, then create an action step. Within this action step select ecommerce > Empty cart.

Alternatively you can create a quick reply button > Select “Empty Cart”

Checkout

To simulate the checkout process, you will have to setup your Stripe Integration as well. Check how to setup Stripe.

If you don’t want to put “Checkout” under each product, try adding one more text-type information after showing the cart:

When users checkout, a list of products will show with quantity and price first, following by an area to leave users’ contact details:

Keep scrolling down you will see delivery options, coupon code and a summary of the order.

Finally, by selecting a payment option and clicking “Pay $xx.xx”, the page will be directed to your payment gateway.

An order confirmation will be sent when payment succeed. Click on the confirmation to view the order detail.

“Buy” Only One Product

“Buy” is actually a feature having nothing to do with the built-in ecommerce system. After setting up your payment gateway, users can purchase one product (can be from your Stripe account) with one click on the “Buy” button with no ecommerce system setting at all.

The feature is suitable for ticket product without options or paying subscription fees, etc.

How to use System JSON Variable

There are several system field storing information about the ecommerce system. Usually, the system will tell you where to find according to data like this:

You can access them wherever you see “</>”:

System JSON – “SHOP”

“SHOP” stores all information about your ecommerce settings.

System JSON – “ORDER”

“ORDER” stores the user’s last order. You only get an order after checkout.

System JSON – “CART”

“CART” stores the user’s shopping cart.

System JSON – “SELECT”

When you choose “Select” when a button pressed, the selected item is stored in “SELECT”.

SELECT.sku: