In this tutorial, I will explain how you can create an abandoned product browse reminder for your Shopify Webshop in Facebook Messenger.
And we are going to create it by using ManyChat.
I will show you:
- How you can convince a user to opt-in to your Messenger chatbot
- How to automatically add a coupon to someone’s cart when clicking a ManyChat button
- How to send an automatic abandoned browse reminder
Let’s dive in!
Table of Contents
How does an Abandoned Browse Reminder work?
When someone looks on your product page and then goes away from your website (without adding something to their cart) you can automatically send them a reminder.
The chatbot strategy
If we want to send an abandoned browse reminder in Facebook Messenger, we first need users to opt-in to our Messenger chatbot. To do that, we will show them a pop-up with a 10% discount on our website.
When somebody clicks on that pop-up, they will go to our Facebook Messenger chatbot where they will get the 10% discount.
And when they browse your website and don’t add anything to their cart, we can automatically send a reminder with our Messenger chatbot.
Connect Shopify to ManyChat
Before we can create our abandoned product browse reminder, we first need to connect Shopify to ManyChat.
And if you haven’t used ManyChat before, just click the button below and create your own ManyChat account.
If you want to use the Shopify integration of ManyChat, you need to with the Pro plan, which only costs $15 per month for 500 subscribers.
Then, if you go to the Settings in ManyChat, click on Integrations, you need to fill in your Shopify domain and click on Connect Shopify Account:
By the way, this is just the URL of your Shopify webshop when you go to the home page.
When you have clicked the button, you will automatically go to Shopify and here you need to click on Install unlisted app:
And now Shopify is connected to ManyChat!
Once you’ve done this, a pop-up automatically appears that asks if you want to install the pre-built templates.
And we want to do this because this will actually save us a lot of time, so just click on Get my templates:
By the way, if the pop-up with the templates is not showing up, you can also install it from here.
Create Website Pop-Up in ManyChat
Now that we’ve successfully connected Shopify to ManyChat, we will start by creating the pop-up on our Shopify webshop.
And in ManyChat, this website pop-up is actually called a Messenger Modal.
So just go to the folder with the installed templates (it is called “Shopify Abandoned Cart”) and click on Shopify Add to cart Popup for opt-ins:
And then choose for Edit flow in the upper-right corner:
Here we need to change two things:
- Now, this pop-up opens up when somebody adds something to their cart. But, we want it to open up before they add something to their cart after a few seconds.
- Also, we need to change the text inside this flow
Let’s start with changing the pop-up.
So, you can just click on Messenger Modal:
Then click on it again:
And then click on Show Preview:
Now you can see the preview of how the pop-up would appear on your Shopify webshop. And we want to change the title, text and button of the pop-up.
So, you can just click on the title and text, and we will change:
- The title to “Do you want 10% discount on your first order?”
- The text to “Click the button below to get 10% discount on your first order.”
And we will change the button text to “Receive this in Messenger”:
P.S. I generally recommend setting the button text to “Receive this in Messenger”, so users know that they are going to Facebook Messenger instead of staying on your website. This will avoid confusion with your website visitors.
When you’ve done this, the pop-up should look like this:
Then, on the left-hand side, you can set different settings for customization. For example, you can change the colors of the font, the background of the button and the button size. In this tutorial, I will just use the default settings, but just know that you can change all those settings.
Also, we need to change when the pop-up displays. Now it displays when someone clicks on the add to cart button. But I generally do not recommend doing this, because you need to give users a reason to add something to their cart.
So, you need to show it before they add something to their cart. You can just select Seconds have passed and set the number of seconds to 30 seconds:
Also, when somebody saw the widget or manually closed the widget, I recommend never showing it again. So, both set these settings to Never:
Now, you can just click on Next, and here you will find the submitted state:
This is how the pop-up appears when somebody clicked on the button. I will leave this by default, but just now that you can also change the settings here just as we did before. Now click on Next.
Then, we can select on which pages we want to show or hide our website pop-up. So if you only want to show it on specific pages, just fill in the URLs under “Only show on these pages”:
When you’ve done this, you can just hit Activate & Check. And now the pop-up should appear on your Shopify webshop after 30 seconds!
Automatically add a Coupon to the Shopify Cart
Now, we need to edit the text of our Messenger chatbot when somebody clicks on the pop-up. So, you can just click on the Messages, set the Content type to Other and the following text:
Hey {first_name}!
Click on the button below to get your 10% discount 👇
(This coupon is automatically added to your shopping cart, so you don’t have to do anything 😉)
But how do we automatically add the coupon to the cart? You can do it by clicking on the % icon:
Then, give the Campaign Name “COUPON10” and set the Coupon Type to “Static Coupon”:
Fill in a Discount Value of 10, set the Discount Type to “Percentage”, fill in “COUPON10” under Static Coupon and click on Create Campaign:
What we then do, is adding a button with the button title “Shop with 10% off”, set it to Open website and set the website address to https://[shopify-domain]/discount/[discount-code]:
This is really useful because it will automatically add the coupon code to someone’s cart. Now, users don’t need to manually fill in the coupon code, which will increase the conversion of your webshop.
Lastly, just click on Publish in the upper-right corner.
Set up Shopify Abandoned Product Browse Reminder in ManyChat
The next step is to set up the abandoned product browse reminder in ManyChat.
Let’s go back to our flows in ManyChat, choose the Shopify Abandoned Cart folder and click on New flow in the upper-right:
Click on Start from Scratch:
And name the flow Shopify “Abandoned Browse Reminder”:
First, we will add the trigger to our flow. So you can just click on Add trigger:
Then, choose for Shopify and click on Abandoned Product Browse:
On the left side, you can now determine the settings for the abandoned product browse. I generally recommend sending the reminder after one hour:
Now, we need to create the message we are going to send in Facebook Messenger. First, set the Content-Type to “Other” and add an image to the message:
By using the Image element, we are going to show the product image of the product someone browsed on your website.
So, click on Insert URL, click on the brackets icon and select Most Expensive Viewed Product Image:
Then, we can add the following text to the message:
Hey {{first_name}}, you recently looked at {{app.10.object.abandoned_product_browse.most_expensive_viewed_product.title}} in our store, but it seems you haven’t have the time to place an order yet.
If you are still interested in {{app.10.object.abandoned_product_browse.most_expensive_viewed_product.title}}, just click the button below 👇
P.S. Don’t forget to use your coupon: COUPON10
And add a button by clicking on Add button, set the text to “🛍 Go to product” and set it to the Most Expensive Viewed Product URL:
Now, just hit Publish (in the upper-right corner) and don’t forget to activate the Abandoned Cart Trigger:
And that’s it, your Shopify Abandoned Product Browse Reminder should be working!
Now It’s Your Turn
Now, if someone opt-ed in for your Messenger chatbot, browsed your website and didn’t add anything to their cart, automatically a reminder in Facebook Messenger is sent after one hour.
Now I have a question for you:
Do you already use the integration between ManyChat and Shopify?
And if yes, what results are you getting with this?
Please let me know by leaving a comment below.
