All Collections
Advanced Design
Add Products at the Basket / Cart page
Add Products at the Basket / Cart page

See how to add a merchandizing widget of products for upsell opportunities at the cart / basket page.

Niall Diamond avatar
Written by Niall Diamond
Updated over a week ago

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.


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 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

if ($('body').hasClass('ex-cart')) {
// Make the clear cart it's own row
var clearCartRow = '<div class="row clearCartBtn"></div>';
var clearCartBtn = $('.clearCartBtn + .row .col-sm-4').detach();
// 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) {
}, false);

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.

Did this answer your question?