Add-to-Cart Email Capture Popup

Learn how to capture email address of the customer early in Checkout and increase conversions with the Add to Cart popup
Customer's email address is very important if we need to follow-up in case of cart abandonment. This article helps you set up the Add-to-cart popup tool to capture the customer's email address early in Checkout.
Here is an example of the Popup
Add-to-cart Email Collection Popup - Sample
Add-to-cart Email Collection Popup - Sample

How customer's email is captured?

The customer's email address captured at the Checkout step. This is the default in any eCommerce platform.
As soon as customer enters his email address at the checkout, it is captured by Retainful. No need to click the Place order button or any other button. Just entering the email address itself is sufficient. Retainful will capture the email in real time.
In Shopify, the customer's email address is captured as soon as the customer proceeds to the payment step at the checkout after entering his billing address.
But what if the customer abandons the cart and leaves your store before reaching the checkout without providing any email address?
In this case, you are left with a cart that is "NOT RECOVERABLE" because there is no email address given by the customer. Without an email address, it is not possible to contact the customer.
So what is the solution?

Capture Email Address early in Checkout

Retainful provides you a tool - Add-to-cart popup - to capture the customer's email address early in checkout. As soon as the customer clicks the "Add to cart" button, a popup will be shown to collect the customer's email address.
However, popups, especially those with email collection, are annoying. Most visitors will not provide you their email address if you plainly ask for it.
So how do we collect the email address of the customers without annoying them ?

Reward customers for providing their email Address

Retainful offers you a powerful feature to reward your customers for providing thier email address. You can email them a coupon or instantly reveal the reward as soon as the customer entered his email address.
Here is how it works:
Add-to-cart Email Collection Popup - Demo
Now, the customer will be more than willing to provide his email address and claim his reward. This serves two purposes
  1. 1.
    Increases on-site conversions: Because, if the customer wants to claim his reward, he has to complete his purchase.
  2. 2.
    Captures the email address: We will be able to follow-up with the customers even if they abandon their carts. Now, we have a way to reach out to them :-)
This guide walks you through the steps required to enable the Add-to-cart popup in your store.


Before we get started, please make sure you have the following requirements met:

For WooCommerce Stores

The following section describes the set up instructions for enabling Add-to-cart popup for WooCommerce stores

1. Basic Configuration

Please go to your WordPress Dashboard → WooCommerce → Retainful → Premium → Add to cart popup.
Add-to-cart popup - Configuration
Add-to-cart popup - Configuration
Enable Add to Cart Popup modal: Set this field to YES to activate the popup for Email Collection
Email Address Mandatory: You can set this to YES to force customers to enter their email address before adding to cart. You can also have this set to NO if you do not want to force
No Thanks action: By default, Retainful will show a No Thanks link to close the popup and proceed to cart. This to ensure that the customer get a choice. Recommended setting is Allow adding to cart
Show E-mail collection popup: Recommended setting is "Until user clicks No thanks link". (It will stop showing once user clicked no thanks)".
If you wish to force users to enter their email address, you can set it to "Until user provides email address"
Custom pages to display the pop-up modal on (optional): You can choose the pages where the add to cart popup should appear on the site when a customer clicks the "Add to cart" button. This is useful if you want to trigger the popup only in a few shop pages.
Custom classes (optional): This option helps when you have a custom add to cart button for your products and wish to display email collection popup while users click on those buttons as well. This being the case, you will have to mention the class used for that custom created button. For example: .custom_add_to_cart

2. Customizing Popup Design

Retainful allows you to customize the popup design. You can change the default text, button text, no thanks action link text and more.
Scroll down to the heading popup design to customize the email collection popup.
Add-to-cart popup Template
Add-to-cart popup Template

3. Rewarding customers with a coupon code for their email address

Let's face the fact. Very few people would like to give their email address at the time of adding to cart. Especially, when you plainly ask "Enter your email to add this item to cart"! Would you provide yours? No.
So how do we collect the customer's email at the time of adding a product to cart?
Reward the customers for providing the email address. Who would resist if a popup says "You got a 5% discount! Email me the coupon"
Now, anyone would be willing to give their email address to you. So how are we going to achieve that with Retainful?
Step 1: Create a coupon code
Let's create a coupon code first.
Go to WooCommerce -> Coupons
In WooCommerce 4.0, the coupons menu is moved under the "Marketing" menu.
Click the "Add Coupon" button to create a coupon.
You can create a simple percentage-based coupon. That should be sufficient or you can also go for a fixed amount discount as well. The choice is yours
Creating Coupon for Add-to-cart popup
Creating Coupon for Add-to-cart popup
Step 2: Enable Coupon for Email Collection
Go toYour WordPress dashboard -> Retainful → Premium → Add to cart popup configuration
Scroll down to find the Coupon settings → Incentivize the customer for entering his email
WooCommerce Coupon Reward settings
WooCommerce Coupon Reward settings
As shown in the above screenshot,
  • Set the Enable coupon to Yes
  • Choose the coupon code you created in the previous section
Instantly display the coupon code Instead of making your users wait for the email with the coupon code, now you could just display the coupon code on a pop up once they enter their email addresses. Go to WooCommerce → Retainful → Premium → Add to cart popup configuration
Instantly reveal the coupon code
Instantly reveal the coupon code
You could use the following shortcodes on the response popup template to display the coupon code:
  • {{coupon_code}} - To display the coupon code
  • {{coupon_url}} - Using the shortcode will automatically apply the coupon when clicked.
Step 3: Save your configuration
Now you have successfully set up Retainful to incentivize your customers to provide their email.
  1. 1.
    In the Storefront, when a customer clicks "add-to-cart" button, he will see the popup:
Add to Cart Popup for WooCommerce
Add to Cart Popup for WooCommerce
2. Once customer enters his email address and clicks "send me the coupon code", he will be revealed the code in a popup:
Reward customers for entering email address
Reward customers for entering email address
That's a great motivation for the customer to complete his purchase. Even if he abandons the cart after getting the coupon, you can still have the chance to recover it by following up with email reminders

Pro Tip!

  1. 1.
    If you plainly say "Enter your email", most customers would hesitate to provide it.
  2. 2.
    Your popup messaging should sound like a reward. example: "You've got a 5% special offer"
Messaging Examples:
  • Get special offers emailed to you!
  • Become our VIP customer. Get personalized offers delivered to your email!
  • Get notified early for the next sale!

Next Steps