An "Add more to cart" module on the Checkout is a great way to increase the amount of products your customers buy, Checkout page can be a great place for showing a few more products that your customers may want to add to their carts.
Editing the Checkout.liquid file is only possible for Shopify Plus users, so this tutorial is targetted only for Shopify sites which have the ability to edit the checkout's liquid file, if you don't you may not be able to do this.
What are we building?
This. If you are here you know why you may need it so I won't go into the details about the marketing needs for having an up-sell module on your checkout page.
Show me how to do this
Even after you get the ability to edit Checkout.liquid file you still don't get a whole bunch of goodies that you can simply drag and drop on your Checkout pages. We will use JS DOM Manipulation to insert the required HTML.
Next is getting a list of random products, now no AJAX API in Shopify provides a direct API to get you a list of random products, so we built a nice enough system to get us that, using Product Recommendations API
Let's get started
Normally I would go through each of the lines of code explaining the parts of code, but since this entire piece of code can be simply pasted in your checkout.liquid file I won't waste your time trying to explain you the code, you can simply copy paste and start using it.
The code is commented, so you know what's going on and what you can change to fit your own needs.
<script type="text/javascript">If you are having trouble viewing the code then check this Gist on Github with the full code where you can copy and paste easily.
var addProuct = function( variant_id, qty, btn ) {
if ( !qty ) { qty = 1; }
var data = {
"id": variant_id,
"quantity": qty
};
window.Checkout.jQuery.ajax({
type: 'POST',
url: '/cart/add.js',
data: data,
dataType: 'json',
success: function() {
// As soon as the success response is received we reload the page,
// so the user can see the updated cart items on checkout page itself.
$( btn ).removeClass('btn--loading');
window.location.reload();
}
});
};
// Function that makes a call to the Product Recommendations API, we pass a random product id and get a list of products, then we choose a random product from that list of products.
function _getARandomProduct( productid ) {
Checkout.$.getJSON("/recommendations/products.json?product_id="+ productid +"&limit=5", function( res ) {
if ( res.products != null ) {
var selectARandom = res.products[ _getRandomInt( 0, ( res.products.length - 1 ) ) ];
// We don't get the different sizes of images in the response, so we do a simple string replace to add _small to load a small image and not a full sized one.
var smallImage = selectARandom.featured_image.replace('.jpg', '_small.jpg');
// This is one individual product card,
var productHtml = `
<div class='random-product-item'>
<div class='thumb-product-img'>
<img src='${ smallImage }'>
</div>
<div class='product-detail-col'>
<h4 class='prod-title'><a href='${ selectARandom.url }' target='_blank'>${selectARandom.title}</a></h4>
<div class='prod-price'>Rs.${ (selectARandom.price / 100) }</div>
</div>
<div class='product-add-wrapper'>
<a href='#' class="extra-productadd-btn" data-variant='${selectARandom.variants[0].id}'>
<span class='btn-text'>Add</span>
<svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use></svg>
</a>
</div>
</div>
`;
// We keep appending each product to the HTML
Checkout.$('.checkout-add-products-list').append( productHtml );
}
});
}
function _getRandomInt(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}
// This is the entire function that will execute on page load, here we will reference to the functions that we created above.
(function(){
$ = Checkout.jQuery;
$( document ).on('page:load page:change', function(){
/*
* Add more products to cart.
*/
// Here we add this container HTML after the #order-summary div that's there on the page
$('#order-summary').after( `
<div class="checkout-add-cart-module">
<h4>Add more products to cart</h4>
<div class='checkout-add-products-list'></div>
</div>`
);
// IMPORTANT:
// These are product ids, it should be different for your site. These product ids are what we use to find random related products, so fill these with the products from collections from where you want to show random products.
// To get the product ids go to a product edit page, on the browser address bar you will find the id in the url at the end.
var productIds = [
'5514666082459', '5448173977755', '5448178270363', '5448176894107',
];
// We assume there's a div .cart-random-products
//
var randomProductsToShow = [];
for ( var i = 0; i < 6; i++ ) {
var randomProductId = productIds[ _getRandomInt( 0, ( productIds.length - 1 ) ) ];
_getARandomProduct( randomProductId );
}
$('body').on( 'click', '.extra-productadd-btn', function( e ){
// Get the variant id of the product
var variant = $( this ).data('variant');
// Add a nice loading effect to button while the AJAX call runs
$( this ).addClass( 'btn--loading' );
// Call the function to add the product using ajax and reload the page on success.
addFreeGift( variant, 1, $(this) );
// So the button link doesn't do anything strange.
e.preventDefault();
});
});
}());
</script>
In this code you do not have to do much, for `productIds` populated the array with product ids from your own Shopify Plus store. Other than that you can also change the numbers in the `for loop` to show more or fewer products.
Where do I place this?
In your Shopify site's theme edit look for the checkout.liquid file, if it doesn't exist click on "Add a new layout" under "Layout", select "Checkout" from the select menu and create it.
Here you can paste this code just above the closing </body> tag.
HTML is done, let's do some styling
You now have the HTML rendering but it is not complete with a good style. I am using a very basic and standard style for the module but you can change the CSS according to your own needs.
/*This is it. I have made it mobile responsive too and gave it a slider kind of look so that it doesn't take a lot of vertical space on mobile screens.
* Add to Cart module for Checkout
*/
.checkout-add-cart-module {
padding: 0px;
background-color: transparent;
margin-top: 30px;
}
.checkout-add-cart-module > h4 {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.checkout-add-cart-module .checkout-add-products-list {
margin: 15px 0;
}
.checkout-add-cart-module .random-product-item {
padding: 5px 0px;
display: flex;
align-items: stretch;
}
.random-product-item .product-detail-col {
width: 50%;
padding: 5px 10px;
}
.random-product-item .product-detail-col .prod-title {
font-weight: 600;
color: #333;
font-size: 15px;
margin-bottom: 5px;
line-height: 1.4;
}
.random-product-item .product-detail-col .prod-price {
font-size: 13px;
font-weight: 600;
color: #333;
}
.checkout-add-cart-module .random-product-item .thumb-product-img {
width: 65px;
height: 65px;
border-radius: 5px;
position: relative;
overflow: hidden;
background-color: #fff;
border: 1px solid #eee;
}
.checkout-add-cart-module .random-product-item .thumb-product-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.product-add-wrapper {
width: 25%;
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
align-self: center;
position: relative;
}
.product-add-wrapper a.extra-productadd-btn {
color: #fff;
display: inline-block;
padding: 5px 20px;
background-color: #197bbd;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
position: relative;
}
.product-add-wrapper a.extra-productadd-btn:hover {
background-color: #1c6495;
}
.product-add-wrapper a.extra-productadd-btn.btn--loading .btn-text {
opacity: 0;
}
@media ( max-width: 640px ) {
.checkout-add-products-list {
display: flex;
overflow-y: auto;
align-items: flex-start;
}
.checkout-add-cart-module .random-product-item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
min-width: 175px;
}
.random-product-item .product-detail-col {
width: 100%;
text-align: center;
}
.product-add-wrapper {
width: 100%;
justify-content: center;
}
.checkout-add-cart-module .random-product-item .thumb-product-img {
margin: 0 auto;
}
.product-add-wrapper {
align-self: flex-start;
height: auto;
}
}
Where to place this? Wrap it in a style element and paste it just below the <script> you added above, or you can create an asset file and then include that asset in the checkout liquid file. Your choice.
So this is it.
Where do I find help on this?
I wanted to cover this script deeply but the fact that web developers are the primary audience for such tutorials I haven't, but if you are a Shopify user and would like this feature then you can contact me (depy45631@gmail.com) to get this done on your site.
On top of that if you are already a Shopify Plus user and are looking for someone to add features on Checkout pages then I can help you too. I have done a lot of different customizations on Checkout liquid, such as OTP Verification for Cash on Delivery on Shopify Checkout, Automatic pincode checker and populate City, State, Country, Add Free gift to Cart on purchase of X amount etc.
