The Ultimate Guide to the Ajax/Slide-Out Cart on Shopify: Viewpoint of an eCommerce Designer

What is an Ajax Cart? Ajax is short for the code (Asynchronous JavaScript and XML) it uses to create the cart and its functionality. This modern marvel allows customers to add items to their cart without refreshing the page.
Brad Holland

Ah, the humble shopping cart—once a creaky, wheel-wobbling contraption that you'd painstakingly push around a grocery store, yelling expletives in your mind about its worthlessness and that stupid rock that stopped the front left wheel from moving.

In the digital realm, however, it has transformed into a sleek, efficient powerhouse of online shopping. Welcome to the world of the Ajax Cart, also known by its playground name, the Slide-Out Cart, where shopping is as seamless as scrolling through your Insta feed, with the added convenience of not getting stuck in rush hour traffic.

So, What is an Ajax Cart?

Ajax is short for the code (Asynchronous JavaScript and XML) it uses to create the cart and its functionality. This modern marvel allows customers to add items to their cart without refreshing the page. Imagine shopping without those annoying page reloads that interrupt your flow—like a waiter whisking away your empty plate while you're mid-bite.

The Ajax Cart’s main function is to enhance the shopping experience by making it faster and smoother for the customer to interact and cruise around the website as well as to easily view what they’ve added to the cart. It’s like the cart is saying, "Hey, look what you’ve got so far!" without taking you away from your shopping spree. This all happens in real time. No interruptions, no waiting—just a seamless addition of goods to your virtual basket. This truly is an innovative piece of technology and UX.

Conventional Use on Mobile & Desktop

Now, let's slide into some aspects of the Ajax Cart. This is 2024, so they’re pretty standard elements in today’s modern themes. In fact, the user should expect to use it at all sites no matter if you’re shopping on your phone or chilling with your laptop while working/shopping. If the Ajax cart isn’t there, this creates friction and could enrage customers from the not-so-friendly user experience.

Well over half of all eCommerce traffic comes from mobile devices, and according to Forbes, Mobile commerce sales are expected to account for 62% of all retail sales by 2027 (Source). Additionally, Mobile commerce accounted for $491 billion in sales in 2023 (Source), so it’s imperative that you have an Ajax cart that is designed and optimized for best UX/UI practices so your business can get a sweet piece of that pie.

Best UX/UI Practices

I’ve designed quite a few Ajax Carts here at Roswell and have been successful at increasing conversions (sales) with the clean and easy-to-navigate layout. I’ve also seen some amazing designs from popular brands—and some not-so-good ones. I’m not going to name-drop those, but just know they’re bad, real bad…like to the point that a user can’t find or even click the Checkout button. It’s a sick world out there.

To make the most out of your Ajax Carts, follow these best UX/UI practices:

  • Visibility: Ensure the cart/bag icon is always visible and easily accessible on your site's mobile and desktop versions.
  • Feedback: Provide instant visual feedback (e.g., a quick animation, notification, number, and/or color change) when items are added to the cart. Additionally, I like to see an indicator that the cart is empty, such as a zero. This isn’t required, as just an empty cart icon works, too.
  • Easy Navigation: Allow users to view and edit their cart within the cart without leaving the current page. Make sure they can easily return to shopping.
  • Clear Calls to Action: Use clear, compelling CTAs like “Proceed to Checkout,” “Checkout - $00.00”, and “Subscribe” (depending on purchase type).
  • Minimal Distractions: Keep the slide-out cart clean and simple. Avoid cluttering it with unnecessary information.
  • Clean Layout: A hierarchy of elements, such as a clear product section and spacing that’s enough for the user to see what’s been added to the cart. Upsells/recommended products sections are typically under the main products and smaller, with light-colored backgrounds to show a lower priority than the main products. I have seen brands put them above the main products with a light-colored background. Testing these 2 layout options would be ideal to see which one gets the most checkout completions.
  • Sticky Checkout and Totals section: - If a user adds multiple products, the Ajax cart will scroll and keep the CTA visible at all times. This is the more important part of the Ajax Cart.


Enhanced Features to Boost Conversions and AOV

Shopify is wonderful for offering new businesses some great features in their free and standard themes. This allows new merchants to get going and make some sales. If your brand is ready to rock n’ roll with Shopify Plus, then adding these advanced features to your Ajax cart will work wonders for your sales. Even if you're not a Shopify Plus merchant yet, you can start implementing these strategies for sustained future growth.

Take a look at these enhancements and see how they can help your business grow:

  • Free Shipping + Bonuses Progress Bar: Customers love free shipping. One of the higher abandonment rates is due to shipping costs. Visually show your customers that they get free or reduced shipping on the items in their cart. This alleviates their barriers to purchase.
  • Gift with Purchase (GWP): Free goodies from you based on the total purchase price of added products give the customer even more incentive to checkout. Be sure to make the free gift choices easy to select and understand as not to encumber the checkout process.
  • Rewards Discounts & Features: Display a logged-in user’s rewards progress and their ability to earn and/or redeem their accumulated points (whatever $$ value applied) based on their current purchase of products in the Ajax Cart.
  • Product Recommendations: Use the cart to display related or complementary products, enticing customers to add more items. This is a super way to cross-sell merchandise bundles and items that jive together, similar to Shop the Look.
  • Subscription Updates in Cart: This is an advanced feature as Shopify doesn’t allow customers to change their subscribed items while in the Ajax Cart by default. This feature is customized in the subscription platform’s code. Roswell partner’s with Recharge to help our client’s get the most out of their subscription offerings. In cart edits are paramount as it allows users to change variants such as the sizes or amounts of the product, the subscription delivery times, and the quantity of the subscriptions needed. This feature saves the customer so much time since they don’t need to remove the item and re-add it again with the updated subscription details.
  • Urgency Indicators: Add features like countdown timers or low-stock alerts to encourage quick purchases. Adding the psychological urgency marketing method as well as other known shopping behaviors, is a tried-and-tested option for product visuals. These methods are accepted as long as you’re honest and ethical with your customers.
  • Cart Persistence: Ensures that the cart remembers items even if the user leaves the site and comes back later.
  • In-Cart Upsells: Enhance the customer experience with deals or discounts on additional items directly within the cart. Again, make sure these aren’t upstaging the main products in the Ajax Cart that the customer is ready to purchase.

Future Features in Development

The world of eCommerce is ever-evolving, and exciting developments are always on the horizon. Future features might include:

  • AI-Powered Personalization: Using AI to suggest products based on browsing history and previous purchases. Creepy as it sounds, this feature might be like a personal concierge.
    • Voice Integration: Enabling users to add items to their cart via voice commands. Customer: “Shopify, add the blue jeans in sky blue, size 32 to the cart.”
    • Shopify: “ I think you’re a size 36 in jeans based on your last 4 purchases.”
    • Customer: STFU and just add what I said!!”
  • Augmented Reality (AR): Allowing customers to visualize products in their real-world environment before adding them to their cart. This feature is already available and becoming even more popular. Sunglasses and furniture are leading the way.
  • Enhanced Security Features: Implementing advanced security measures to protect customer data and increase trust. This is a huge must in today’s world with 2FA and other methods. Be ready to see some futuristic security features like tokenization and Biometrics such as facial recognition, eye scans, and fingerprinting technology, so mobile phones, tablets, and other devices can recognize a customer in a heartbeat just like in Total Recall.

Carts We Like

  • Allbirds - (https://www.allbirds.com)
    • Allbirds uses a Slide-Out Cart that is clean, user-friendly, and perfect for a seamless shopping experience.
  • Gymshark - (https://www.gymshark.com)
    • Gymshark’s Ajax Cart ensures that adding items is smooth and immediate, keeping the fitness buffs focused on their gains.
  • Kylie Cosmetics - (https://kyliecosmetics.com/)
    • Kylie Cosmetic’s cart offers a great example of product promotions and recommendations within the Slide-Out Cart, increasing AOV by suggesting complementary products.

Here are some of Roswell’s Favorites!

  • Love Amika - https://loveamika.com/
    • Amika’s Cart is pretty amazing and jammed packed with features that will make even a hardened criminal blush. With Rewards, Free Shipping progress bar, Gift with Purchase selections, and You may also like section, this Cart has it all. Even with this carnival of goodies, the design is clean and keeps all these features organized.
  • Hat Heaven - https://hatheaven.com/
    • Hat Heaven’s Slide-Out cart is exactly what you’d expect for the sports enthusiast. Crisp and on-brand colors with product recommendations and the sticky Checkout button so customers can get their hats and look good ASAP!
  • IQ Bar - https://www.eatiqbar.com/
    • IQ Bar’s Ajax Cart keeps things bright and simple. They offer the ability to change your subscription delivery or swap it to a one-time purchase item. Now that’s smart. They must use their own products. The desktop Ajax cart offers a unique vertical product recommendation slider which makes it a fun shopping user experience.

Conclusion

Since you’re not asking your customers to push a metal contraption of evil through your digital store, I recommend making that Ajax Cart experience the best it can be. By adopting these features which are driven by well thought out design and following best practices, you can enhance user experience, increase conversions, and boost your average order value. So, gear up and give your customers the shopping experience they deserve—seamless, fast, and oh-so-satisfying.

Wait, what happens when you have a well coded and wonderfully configured Ajax Cart with all the bells and whistles but the customer still doesn’t order?

Well, good thing you have me to tell you. On top of having an attractive cart that the neighborhood marvels about, that cart also has some back-end integrations that are smart a whip such as Klaviyo (a Roswell Gold, Supreme, Celestial level partner) that allows you to send Abandoned Cart emails and remarketing ads across the social sphere to entice that customer to come back for that which they desired.

Stay tuned for the follow up blog post from our Retention Marketing team on how best to leverage Klaviyo, Loyalty Lion, and Because, because...you’ll increase sales.