How to automatically add a product to the Cart on your Shopify Store?

In this tutorial we will see how to create a system that will automatically add a product to the cart on Shopify.

Here’s the concept, when you go through a product page and add a product to your cart, upon arriving on the shopping cart page you will have a second product of your choice that will be automatically added to the cart (with certain preconfigured conditions). This tutorial is ideal if you want to offer a free product with the purchase of a specific product or all of your products.

How does it work ?

Please note that this system will only work for stores with a cart page! This means that your customers must arrive on the shopping cart page. You should therefore avoid mini-carts, pop-up carts and drawer carts (sliding column on the right) which are incompatible with this system.

You will have several options you will be able to configure:

  • Add an additional product no matter what product is initially added to the cart,
  • Add an additional product only if a specific product from your catalog is present in the cart,
  • The possibility to choose a specific variant of a product to add.

How to install the code for the auto add to cart system?

Go to Online Store – Actions – Edit Code – Open the Template folder and then the cart.liquid file – Go to the bottom and copy/paste the following code:

<!-- set allProducts to "yes" if you want the product to be added regardless of the products in the cart - otherwise set it to "no" -->

{% assign allProducts = "yes" %}

<!-- If you want the auto add system to work only if a specific product of your choice is added at the cart - replace product-1 with the url portion of said product -->

{% assign for_specific_product = all_products['product-1'] %}

<!-- Next, you will pick the product to be added automatically - replace product-2 with the url portion of said product -->

{% assign product_to_add_auto = all_products['product-2'] %}

{% unless cart.item_count == 0 or product_to_add_auto.empty? or product_to_add_auto.variants.first.available == false %}

<!-- By default it is the 1st variant of the product that is taken into account and added automatically - if you want to change that, then modify "product_to_add_auto.variants.first.id" by the identifier of the variant that you will find in the variants editor of your product -->

{% assign variant_id = product_to_add_auto.variants.first.id %}

{% if allProducts == "no" %}

{% assign isProduct = false %}

{% for item in cart.items %}
  {% if item.product.handle == for_specific_product.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 %}

How to configure the options

Now let’s see how we can change the configuration of the system

Everything is made in a way that makes it as easy to understand as possible. Still, please try not to touch anything you’re not sure about to avoid breaking the code 😉

{% assign allProducts = “yes” %} – Set it to “yes” if you want to add your upsell product no matter what products are in the cart (works with the whole catalog of the store) or set it to “no” to add in which case the system will only work when a specific product is initially added to the cart.

{% assign for_specific_product = all_products[‘product-1’] %} – Put the url portion of the product that has to be in the cart for the system to be triggered.

{% assign produit_a_ajouter = all_products[‘produit-2’] %} – Put the url portion of the product you want to add to your cart automatically.

{% assign variant_id = product_to_add_auto.variants.first.id %} – By default it is the 1st variant of the product that is taken into account and added automatically – if you want to change that, then modify “product_to_add_auto.variants.first.id” by the identifier of the variant that you will find in the variants editor of your product.

Where to find the url portion of the product?

This tutorial is also available in video format!

Hope you found this tutorial helpful!

You have any ideas for new tutorials? Any questions about this one ? Leave me a comment 😉

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *