Read this article to learn about basic requirements for implementing shopping cart recovery in the theme and different ways of doing it.
For more information about shopping cart recovery, see our user guide.
There are two components connected to implementing shopping cart recovery in the theme:
- The email template for the shopping cart recovery message – /themes/email/THEME/cart-recovery.html
The new default email theme MyCashflow 2018 comes with a readymade email template. There is no such template in the old email theme.
If you use your own email template for shopping cart recovery, make sure that it works well on mobile devices too.
- The form in which customers can indicate their email addresses for shopping cart recovery messages.
The functionality can work in the online store without the form as well but only in certain cases (for more information see our user guide).
The form can be added to the theme by using the
{CartRecoveryNotificationForm}
tag.
Possible ways of implementation
In this section, you'll learn about different ways of implementing shopping cart recovery in the theme.
No form for collecting email addresses or a static form
There is no need for the online store to separately collect email addresses for sending shopping cart recovery messages. The message can be sent if any of the following conditions has been met:
The customer has accepted the shipping conditions and proceeded to payment but the shopping cart has been abandoned nevertheless. In such case, an error may have occurred in the payment service, and the order couldn’t be processed.
The logged-in customer has agreed to receive marketing emails and has proceeded to checkout after adding products to the shopping cart.
The customer has subscribed to cart recovery messages (the form for doing so needs to be added separately to your store theme).
You can also add a static form to the theme, for instance to the footer, checkout or shopping cart page. This solution is non-distracting but it may not necessarily motivate visitors to give out their email addresses.
Pop-up
Alternatively, you can place the form for collecting email addresses inside a pop-up window (modal) to make sure that the visitors to your store notice it. In this section, you'll learn how to place the form inside a pop-up in the Barebones theme.
Adding a pop-up has been implemented with the jQuery plugin cart-recovery.js. cart-recovery.js performs the desired function based on the set delay. The delay is counted from the visitor's last visit to the checkout (with products in the shopping cart) or the moment when the contents of the shopping cart were last modified.
In this chapter, we use the Barebones theme's tools.
The cart-recovery.js plugin used in this article can be downloaded at the end of this article.
Below you can see an example of a content page and email form displayed in the modal.
Opening the modal when the visitor is leaving the page is an aggressive strategy that may annoy them. While it might work in some cases, it may also discourage visitors from visiting your store for good.
If you use Magnific Popup's functions directly in the theme, the modals.js plugin's layout styles won't be applied to them by default. Nevertheless, you can still enable the styles by adding the wrapper <div class="mfp-ajax-content">
to the modal window.
The cart-recovery.js plugin
In this section, you'll learn how to add the cart-recovery.js plugin to the theme.
cart-recovery.js performs the desired function based on the set delay. The delay is counted from the visitor's last visit to the checkout (with products in the shopping cart) or the moment when the contents of the shopping cart were last modified.
Place the script file in the same location as the other theme scripts. Maintaining the theme is easier in this way.
The plugin requires jQuery to function properly.To add jQuery to a page, use the {SupportScripts}
tag. The default theme includes jQuery by default.