How to automatically add to cart products on Shopify
If you've ever wondered how to auto add to cart items on Shopify on Shopify, you've come on at the right place.
In this tutorial we will see how to create a system to automatically add a product to the cart on a Shopify store. Indeed, when you arrive on the cart page a product that you have defined will be automatically added to the cart under certain conditions. This tutorial is ideal if you want to offer a free product with the purchase of a specific product
You've got 2 options to Auto add to cart product on Shopify.
_____
Option 1 [ RECOMMENDED ] : Use an app to auto add product to your customer cart
We recommend to use this app
Price: Free or to $9.99/mo with full features
We believe this app is good for the following reasons
- You can auto add product to cart based on a cart value
- You can automatically add product to cart if a specific product is added to the cart
- You can automatically add product to the cart if product from a specific collection is added to the cart
Link to download this app : Shopify App Store link
____
Option 2 : code it yourself to automatically add items to your customer cart
| 🥺 Be careful, this system will only work for stores with a page type shopping cart system! This means that your customers must arrive on the shopping cart page. We therefore avoid mini-cart, pop-up cart and drawer cart (sliding column on the right). |
<!-- write yes if you want that the product is added no matter what products are inside the cart, otherwise write no -->
{% assign allProducts = "yes" %}
<!-- only if a product is present in the cart - replace product-1 with the url portion of your product -->
<!-- Product to be present in the cart - replace product-2 with the url portion of your product -->
{% assign product_incart = all_products['product-1'] %}
<!-- Product to be added automatically - replace product-2 with the url portion of your product -->
{% assign product_added = all_products['product-2'] %}
{% unless cart.item_count == 0 or product_added.empty? or product_added.variants.first.available == false %}
<!-- By default the first variant of the product is taken into account - if you want to change this change "product_added.variants.first.id" by the identifier of the variant that you will find in the edition of your variants -->
{% assign variant_id = product_added.variants.first.id %}
{% if allProducts == "no" %}
{% assign isProduct = false %}
{% for item in cart.items %}
{% if item.product.handle == product_incart.handle %}
{% assign isProduct = true %}
{% endif %}
{% endfor %}
{% if isProduct == true %}
<script>
(function($) {
let cartItems = {{ cart.items | json }},
qtyInTheCart = 0,
cartUpdates = {};
for (let i=0; i<cartItems.length; i++) {
if ( cartItems[i].id === {{ variant_id }} ) {
qtyInTheCart = cartItems[i].quantity;
break;
}
}
if ((cartItems.length === 1) && (qtyInTheCart > 0)) {
cartUpdates = { {{ variant_id }}: 0 }
}
else if (( cartItems.length >= 1) && (qtyInTheCart !== 1 )) {
cartUpdates = { {{ variant_id }}: 1 }
}
else {
return;
}
const params = {
type: 'POST',
url: '/cart/update.js',
data: { updates: cartUpdates },
dataType: 'json',
success: function(stuff) {
window.location.href = '/cart';
}
};
$.ajax(params);
})(jQuery);
</script>
{% endif %}
{% else %}
<script>
(function($) {
let cartItems = {{ cart.items | json }},
qtyInTheCart = 0,
cartUpdates = {};
for (let i=0; i<cartItems.length; i++) {
if ( cartItems[i].id === {{ variant_id }} ) {
qtyInTheCart = cartItems[i].quantity;
break;
}
}
if ((cartItems.length === 1) && (qtyInTheCart > 0)) {
cartUpdates = { {{ variant_id }}: 0 }
}
else if (( cartItems.length >= 1) && (qtyInTheCart !== 1 )) {
cartUpdates = { {{ variant_id }}: 1 }
}
else {
return;
}
const params = {
type: 'POST',
url: '/cart/update.js',
data: { updates: cartUpdates },
dataType: 'json',
success: function(stuff) {
window.location.href = '/cart';
}
};
$.ajax(params);
})(jQuery);
</script>
{% endif %}
{% endunless %}