A great upsell opportunity is to add products to your basket / cart page. This gives you the opportunity to remind them of other products that they might want to purchase. Below you will see how you can do this in just 5 minutes.
Overview
We will add a merchandizing widget to the footer of our website. Then we will add some copy/paste code to have it hidden and revealed at on the cart page.
Step 1:
Choose or create your merchandizing widget. Make sure not to add any rules to it...as you want the widget to show for everyone.
Add "myMerchCart" to the custom css classname on the widget
Step 2:
Now copy/paste the below code into your Footer Block.
Appearance > Theme options > Footer block
<script>
if ($('body').hasClass('ex-cart')) {
// Make the clear cart it's own row
var clearCartRow = '<div class="row clearCartBtn"></div>';
$('.row.main').after(clearCartRow);
var clearCartBtn = $('.clearCartBtn + .row .col-sm-4').detach();
$('.clearCartBtn').prepend(clearCartBtn);
// move the merch widget into position
$('.clearCartBtn + .row').prepend($('.myMerchCart').parent());
// reset the classes on the merch widget and the .cart-resume
$('.item-merchandising.myMerchCart').parent().attr('class', 'col-sm-9 col-xs-12');
$('.cart-resume').parent().attr('class', 'col-sm-3 col-xs-12');
// reveal it once everything is ready
$('.myMerchCart').css('display', 'block');
// reload the page after an add to cart from the merch widget
document.addEventListener('cart-add-success', function (e) {
location.reload();
}, false);
}
</script>
Now add the below code to your CSS Block.
Appearance > Theme options > CSS block
/* This is for the cart page merchandizing widget */
.myMerchCart {
display: none;
}
Example Copy / paste
Now check the storefront, add something to the cart and test the new functionality.