Add Products at the Basket / Cart page | Evolution X Help Center

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.