A chatbot is a powerful tool that can help increase revenue for ecommerce stores, and we want to show you how to take advantage of this synergy. That’s why we set up our own Shopify store selling Chatfuel t-shirts, and used a bot to promote it. Every single step we took to integrate our Shopify store and our Chatfuel bot is detailed in this guide. So whether you’re new to the space or have an established ecommerce business, you can use our real-life example to learn how to boost your own store’s sales with a bot!
Step #1. Choose your product or service and set up your online store.
If you already know what you’re selling and have a system for fulfilling customer orders, skip to Step #2.
To serve as an example for this guide, we created an online store to sell Chatfuel t-shirts. We used a third-party clothing design and fulfillment service called Printful, so we don’t have to keep inventory or ship orders ourselves. Plus, Printful has warehouses in various countries around the world, which makes international shipping simpler and more cost-effective for us.
Our first order of business was to set up our Printful account, and begin working through their checklist of onboarding items.
First, we had to connect our Shopify store to Printful. If you haven’t already set up your store, here’s how. Once the two are linked, Shopify will automatically create a landing page for products you create in Printful.
Next, we created our first product in Printful with just a few clicks. We chose the clothing item and style (a black t-shirt in various sizes), and uploaded our design (the Chatfuel logo). Once that was done, we selected our pricing and markup. The pricing system in Printful is as follows: A customer purchases a shirt through our Shopify store, and pays us the retail price (e.g. $25). Shopify sends the order to Printful for fulfillment, and Printful charges us their price (e.g. $15).
Finally, Printful will ask you to add a payment method so they can charge you for their services. This is a crucial step—your Shopify orders will not be shipped to customers if your account is missing this information!
Step #2. Map out the customer journey.
Now that you know what you’re selling, it’s time to plan out how to sell it. We find it helps to begin by mapping out the customer journey digitally or on paper. We used Draw.io to do this.
You can see the entire journey we designed below, but here’s a quick summary: We began promotion of the shop with a post in our Facebook group, the Chatfuel Community.
We used an m.me link in the post to lead people directly to our bot. Once there, the bot prompts the user to pick a t-shirt size. They are then tagged accordingly with a user attribute, and redirected to our Shopify landing page where their shirt size will be preselected. If they purchase, they can opt in to receive shipping updates later and will be tagged as a customer in Chatfuel. If they abandon their cart, they’ll receive reminder messages and incentives from the bot to encourage a purchase.
Step #3. Create a bot in Chatfuel.
We’ll be discussing specific features rather than an overview of the entire bot-building process here. To learn more about setting up a bot in Chatfuel, watch our intro video or take our free Udemy course.
The first key function of the bot we created is to ask for the user’s t-shirt size, because it will then send them to the Shopify store where that size will be preselected for easy purchasing. Our bot shares the sizing chart (provided by Printful) first, and then offers quick reply buttons with the different size options.
Once the user chooses a quick reply with their preferred size, our bot redirects them to a corresponding Chatfuel block. There’s a block for each size, and every one contains a different “size code”—more on these in a moment. From there, the bot uses the block’s code to send the user to the Shopify page, where their size will already be selected. You’ll see that the code we use comes from the URL of the specific product page, as shown in the image below.
We also equipped the bot to save the subscriber’s size as a user attribute in Chatfuel. That way, we can follow up later with those who didn’t complete the purchase using the Subscribe to Sequence plugin. We’ll cover this process in the next step.
Step #4. Set up retargeting in Chatfuel.
The key to success in ecommerce sales is reminding the audience about your brand often enough to keep it top of mind. It’s just one more reason bots are ideal for ecommerce: They make it easy to maximize how often we interact with users. For our t-shirt store, we wanted to follow up with anyone who entered their size choice with our bot, but didn’t actually click through to the Shopify page. To do this, we used Button Actions and Sequences in Chatfuel.
- Button Actions is a Chatfuel Pro feature that will create a user attribute (“visited page = true”) when a subscriber visits a certain URL from your bot. In our case, we wanted to track users who click on the “Learn More” button after choosing a size, which takes them to our Shopify product page. This way, any users with that attribute (those who have already clicked through) will be excluded from our future retargeting messages that encourage them to visit the store.
2. Sequences: This is the stage where we utilized the Subscribe to Sequence plugin mentioned in Step #3. First, we created the Sequence, which includes the message we’ll use to encourage users who haven’t yet visited our store to do so. In our case, we included a coupon code for a discount on the t-shirt along with the reminder message. We decided to send this Sequence to any user who didn’t click through to the Shopify sales page within 30 minutes of their sizing interaction with the bot.
There are three important points to note when creating a Sequence like this one:
- We’re sending a coupon code to users, which means that our message is promotional in nature. To comply with Facebook messaging policies, we have to tag it as such. The “UPDATE” tag that we need to use for this message is already selected in Chatfuel by default.
- We also set up the Redirect to Block plugin in our bot, which filters out people who have already visited our sales page (those who have the user attribute “visited page = true”). This means they’ll be sent to an empty block and will not receive the coupon code. That way, we won’t send irrelevant messages to people who already did what we want them to do.
- We needed to create a valid coupon to include in this message to incentivize users who haven’t yet clicked through to the sales page. We created a 10% off code, “GET10,” in Shopify, and then added the name of it to our Sequence message. We’ll cover how to create discount codes in the next step.
Step #5. Create discount codes in Shopify.
We included the “GET10” discount code in our Sequence message, so we had to add it to Shopify next so that it would actually function. Head to your Shopify dashboard and navigate to the “Discounts” tab on the left panel to do this.
From there, you’ll be able to select the parameters of the discount you want to offer. In our case, we named the code “GET10,” and used the type percentage to apply 10% off to the entire order. We also took advantage of the setting in this tab that allows you to limit use of the code to one per customer.
Step #6. Add the Recart app to your Shopify store.
Recart is a Shopify app that lets you easily integrate your store with Chatfuel, so our next step was to set it up for ours. We use Recart to automatically send three main types of messages to users in Messenger:
- Cart abandonment reminders. These apply to users who visit our Shopify product page and add a t-shirt to their cart, but never successfully check out. Recart allows us to send them a reminder via our Chatfuel Messenger bot to improve the odds of conversion.
- Receipt notifications. Users who do follow through and purchase will receive a confirmation message on the web page after they submit their final order. Recart allows us to send that notification via Messenger as well.
- Shipping updates. Recart also lets us send shipping updates via Messenger to our customers who made a purchase. We set it up to send a notification to a user when their order ships from the warehouse.
To set up Recart, simply search for it in the Shopify app store and click “Add app.”
Step #7. Enable the cart abandonment plugin in Recart.
There are several steps involved in setting up this plugin, but the results are worth it! We ran a small trial campaign with our t-shirts, and one of the five orders we received (20%) was a result of the first follow-up message from the cart abandonment plugin. That’s why we’re walking through every detail of this portion of the setup, so you can learn exactly how to implement this helpful tool as well.
If you start feeling overwhelmed with the details of this plugin, refer back to your customer-journey chart from Step #2 to remind yourself of how this piece fits into the bigger picture.
To begin, navigate to the “Conversation Starters” tab in the Recart app, which should now be connected to your Shopify store. Enable the Add-to-Cart Widget. You can use the Add-to-Cart Popup instead if you prefer, since it’s more prominent and will likely increase opt-ins. However, we found that it won’t appear to visitors who have AdBlock enabled in their browser, so we decided to use the widget instead.
Once you toggle the widget to “On,” a checkbox will now appear for users below the “Add to Cart” button on your product page. If they check it, you’ll be able to sync their activity on Shopify with their Facebook account. Click “Edit” to get a preview of how the Add-to-Cart Widget will look on your Shopify page. Make sure to check how it appears by visiting your store in an Incognito window. Otherwise, Shopify’s caching may prevent you from seeing the update in real time.
Next, customize the text that accompanies the checkbox. We found it helpful to include an emoji, like
to draw the user’s eye to the box and encourage them to manually check it. We also mentioned our incentive (the coupon code) in the text. We wanted to do everything we could to encourage the user to check the box, because we can’t track their site activity or send reminder messages if they don’t. Depending on your brand, you could also offer a free e-book or other lead magnet as your incentive for users to check the box.
In the bottom left corner of the view above, you’ll see that Recart also offers a feature called Smart Display. When enabled, this feature will only show the checkbox to visitors who are currently logged into Facebook. We disabled this switch, because we felt that the 10% discount was enough of a motivator to get those who aren’t signed in to do so.
Once we set up a way to track the actions of Facebook users who visit our store, we had to actually create the follow-up messages we want to send them. To do this, head to the “Messenger” tab in Recart, and select “Abandoned Cart Messenger Campaign.”
Remember that Facebook’s messaging policy means your bot can only send promotional messages to users in the first 24 hours after they engage with it. In our case, we set up the campaign to include two messages to be sent during that window: the first one 60 minutes after they abandon their cart, and the second message 23 hours after. You can see the two messages we created below, shown in the order that users receive them.
The second message also includes an even bigger discount code as a final push to get the user to follow through with the purchase. We created this second code in Shopify using the exact same method as before, detailed in Step #5.
The next step is to make sure the user will instantly receive our coupon as promised when they check the box. Go back to the “Messenger” tab in Recart and choose “Messenger Welcome”—the message the user will see first when they check the box and add the product to their cart.
Enable this feature for the Add-to-Cart Widget by toggling the switch to “On.”
Then, compose a message for your bot that offers the coupon code to users. You can see the message we created below.
Before we move on to the next step, we have one final tip to increase the chances of users checking that box. Navigate to your Shopify product page and use their visual theme customizer to disable a feature called “Show dynamic checkout button.” Doing so will remove a second “Buy” button below the “Add to Cart” button. That way, there’s one less item on the page to distract visitors from clicking the checkbox.
If possible, we also recommend editing the CSS here once you disable the dynamic checkout button, since Recart doesn’t offer this customization option. It may help to bold the incentive text and add arrows to make it stand out more.
Step #8. Set up receipt notifications.
Another feature we chose to set up for our store is automatic order-receipt notifications. Once a user submits their order, we wanted a confirmation to appear for them in Messenger. To do this, open Recart, navigate to the “Messenger” tab, and enable the “Messenger Receipt” plugin/widget.
Next, customize the text of the notification that will be sent to users. Recart’s visual drag-and-drop interface makes this easy. You can see the simple message we created below.
Step #9. Set up shipping updates.
The last widget we enabled in Recart is for shipping updates, so our bot automatically messages customers once their order has been marked as “fulfilled” by Printful.
First, it’s a good idea to have the user opt in to updates like these. Though most customers have already opted into receiving messages via the checkbox plugin, it’s nice to have another point where they can confirm. We added this option to the confirmation page users see in their browser after checking out. To do this, navigate to the “Conversation Starters” tab again in Recart, and enable “Order Page Subscription.”
Then, all you have to do is customize the messaging for what you want your shipping update to say. You can do this in Recart’s “Messenger” tab, under “Messenger Fulfillment Notification.”
We kept the text of our shipping notification simple, as you can see below.
Finally, since we offer users plenty of opportunities to opt in to these updates (or any messages from Recart), it’s important to allow them to easily opt out, too. All you have to do is navigate back to the “Messenger” tab in Recart and enable the “Unsubscribe Message” widget. Just like with the other widgets we’ve used so far, you can then customize the text of the unsubscribe message that will appear to users.
Step #10. Match Shopify customers to Chatfuel users with Zapier.
This final task allows us to more easily see how well our e-commerce funnel is converting, and determine which users are most valuable. We used the Zapier-Chatfuel integration to match customers who purchased through Shopify with our chatbot subscribers. We took advantage of this integration in two ways:
- To tell which of our chatbot subscribers actually converted, so we can send a targeted follow-up message asking for their input on our next t-shirt design. It’s a great way to capture the feedback of paying customers and improve our signal-to-noise ratio.
- To use the People tab in Chatfuel to filter out these converted customers, so we can then create Custom and Lookalike Audiences in Facebook. We’ll be able to increase sales and reduce cost per conversion as a result.
First, you’ll need to create a Zapier account and log in. We created a three-step Zap, which you can see in the image below.
For the trigger, or first action, use the Shopify app and select “New Paid Order.” Zapier will ask you to connect your Shopify account to do this. Then, under “Customize Paid Order,” change the Payment Status to “Paid.”
For the second action, locate the Chatfuel app and choose “Find a Subscriber.” Connect the Chatfuel bot that corresponds to your Shopify store. Then, under the “Customize Subscriber” panel, select “search by name” as the search type and import the Shopify customer’s first and last name from the previous action.
For the third action, choose the Chatfuel app again and select “Update Subscriber Attributes in Chatfuel.” Now, any user with the same name in Shopify and in Chatfuel will be tagged as a customer. Of course, matching by name may not be 100% accurate. However, it’s arguably as accurate as matching by email, since a customer could use a different email address when checking out through Shopify than what we have on file in Chatfuel from their Facebook account.
You’ll then be asked to choose the Chatfuel bot you want to use one more time, and you’ll import the Messenger ID from the previous action. Finally, go back to Chatfuel and create a user attribute that designates a converted subscriber. We used “customer = true.”
All that’s left is to test your Zap! When you do, make sure you come up as a user in the People Tab in Chatfuel, so you can confirm you’ve been assigned the customer attribute.
Once your Zap is up and running, you’ve officially completed all the steps for integrating Chatfuel and Shopify. Congratulations on making it to the finish line! You’re now ready to start enjoying even more sales for your ecommerce business. Great work!
📣 Questions? Success stories? Share with us! 📣
Stuck on a step? We can help! Have a smashing success story to share with us? Let’s hear it! Join our Facebook support community to ask questions or showcase amazing results with us and other Chatfuel users. Or, reach out to us directly at firstname.lastname@example.org. Happy bot + shop integrating!🛍🤖