Helping users save items from the shopping cart to their Wishlist instead of abandoning them

Shopping cart abandonment is an extremely common phenomenon in the world of e-commerce. In fact, a recent Shopify study determined that 77.3% of all online retail orders (e.g Shopping carts) were abandoned instead of purchased. There are numerous factors that contribute to the widespread prevalence of this problem,  and it impacts small and large businesses alike. As you can see from the above Shopify study, shoppers have their reasons for abandoning their purchase but its hard to dispute the fact there was clear purchase intent that got them to that point. Even though they aren’t ready to commit and make that purchase yet, we know they are sufficiently interested. It goes without saying that anything you can do to remove friction in their path is only going to help complete that purchase.

While abandoned cart emails are a very popular tactic to bring them back, there are other powerful techniques that you can employ to help move that shopper forward in their purchase journey, and this post outlines one such technique. Let’s say your shopper has added a few items to their cart and is on the verge of abandoning them. Today, they tend to discard those products and move on. What if instead they had a way to “save those items for later”, say by moving them to their Wishlist? That way, when they do come back they don’t have to go thru the discovery process again and navigate the site to find those products – they can go straight to their Wishlist and pick up where they left off – so much simpler, so much lesser friction.

By leveraging the Swym Wishlist Plus app and our rich Javascript APIs,  you can provide this functionality on your store – and this post is an attempt to help you do exactly that. Please note that our Javascript API feature is only available on our Premium plans and higher.

Most stores have a cart page loading on yourstoreurl.com/cart and additionally a dynamic cart sidebar or popup to give customers quick access to the cart and checkout. Lets take each one and explain the steps to enable the “Move to Wishlist” feature.

Firstly, you would need access to edit your theme code. Some examples of editing your theme are here – https://help.shopify.com/themes/customization/cart

Steps

  1. Create a new snippet file called swym-move-to-wishlist.liquid in the snippets folder of your theme
  2. Paste the below code in the liquid and hit “Save”
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
    <script type="text/javascript">
    function initMoveWishlist(){
      var ShopifyCartData = {{ cart | json }} || {'items': []};
      window.SwymCallbacks = window.SwymCallbacks || [];
      window.SwymCallbacks.push(function(swat) {
        // Add a confirmation step
        
        // For cart page button and dynamic cart
        // Use delegate listener to attach click for the button
        // TODO For more granular listeners, attach a direct listener
        $( "body" ).on('click', '.move_to_wishlist', function(evt) {
          evt.preventDefault();
          var elem = this;
          var lineNum = $(this).data()['line'];
          var lineItem = ShopifyCartData.items[lineNum - 1];
          
          $.confirm({
            title: 'Maybe...',
            theme: 'supervan', // 'material', 'bootstrap'
            content: 'Would you like to save this for later?', // TODO You can edit the message to show the product name
            buttons: {
              save: {
                  text: 'Yes!',
                  btnClass: 'btn-blue',
                  action: function(savebutton){
                    // Move to wishlist and remove
                    if(!lineItem) {
                      // get from cart.js
                      jQuery.getJSON('/cart.js', function (cart, textStatus) {
                        ShopifyCartData = cart;
                        var lineItem = ShopifyCartData.items[lineNum - 1];
                        moveToWishlist(lineItem, lineNum, elem);
                      });
                    } else {
                      moveToWishlist(lineItem, lineNum, elem);
                    }
                  }
              },
              nah: {
                  text: 'Nah...',
                  btnClass: 'btn-red',
                  action: function(nahbutton){
                    // Just remove from cart
                    removeFromCart(lineNum);
                  }
              }
            }
          });
          
        });
        
        function moveToWishlist(lineItem, lineNum, elem) {
          var wishlistData = swat.platform.transformCartItem(lineItem);
          swat.addToWishList(wishlistData, function() {
            console.log('Item added to wishlist');
            $(elem).addClass('moved_to_wishlist').addClass('moving_to_wishlist');
            removeFromCart(lineNum);
          });
        }
        function removeFromCart(lineNum) {
          // Remove from cart via location
          window.location = '/cart/change?line='+lineNum+'&quantity=0';
          // You can also do it via cartJS AJAX APIs and dynamically update the UI
          // More here https://help.shopify.com/themes/development/getting-started/using-ajax-api
        }
        
      });  
    }
    (function(){
      initMoveWishlist();
    })();
    </script>

    For this example we are leveraging the awesome confirm library – https://craftpip.github.io/jquery-confirm to prompt the user to move to wishlist instead of just discarding the product

  3. Next, open your theme.liquid template file from the templates folder.
  4. Scroll to the bottom and add the below code just before </body> and hit “Save”
    {% include 'swym-move-to-wishlist' %}

    After editing it should look something like the screenshot below,

  5. Now, open your cart template file and locate the remove from cart button and add the class move_to_wishlistHere is an example. Below is a screenshot of the cart template with the changes highlighted.
  6. If your store has a Dynamic cart popup or sidebar, find the corresponding liquid file for the cart template and follow Step 5.

After setting the above steps, your customers will have a much better experience when on the cart page and are on the verge of abandoning their purchase.

 

We hope this post enables you to create a powerful, customer-centric feature to your cart page. You could try the same on your checkout page where you allow customers to edit their cart on the fly as well.

Note : Every theme has a different cart file. So please identify your cart file or reach out to your theme developer to ask them which file to edit.

Recent Posts

Leave a Comment