5 Cart Flyouts We Love

A recent Baymard Insitute study shows that 17% of shoppers don’t complete their purchases due to a poorly designed checkout process.

This reality is a business’s worst nightmare, as the shopping cart is a vital aspect of any ecommerce store.

Retailers looking to decrease abandonment rates need to take a good hard look at their shopping cart usability. Is it easily accessible? Editable? Fast? If not, it’s time for an upgrade.

Now you’re thinking, “What's the best way to upgrade my shopping cart?”

And now we’re thinking, “Cart flyouts.”

But what exactly is a cart flyout, anyway? 

Cart Flyouts Explained

A cart flyout is a shopping cart that extends out (or "flies" out) from the right side of the screen. It appears when a shopper clicks to add something to their cart or clicks on the cart icon.

With the cart flyout, shoppers can clearly see what’s in their cart and can make edits as needed.

For example, shoppers can change how many products they want to purchase and immediately see the updated cost without navigating to a separate page. The flyout is easily closed by clicking anywhere on the page, which collapses the cart.

Unlike a traditional cart page, the cart flyout lets buyers continue to browse your store while still viewing and editing the items in their cart. Super convenient.

The Upsides and Downsides of Using Cart Flyouts

Before going through the time and effort of creating a cart flyout, let’s discuss the upsides and downsides of using one.

The upsides:

• Fast: Today’s shoppers are all about speed and convenience. A cart flyout delivers on those expectations by immediately showing shoppers what they’re purchasing, how much, and what the cost is—all without leaving the page.
• Immediate: Any changes a shopper makes to their cart are immediately reflected in the flyout. There’s no need to refresh the page or navigate to a new page which, again, is a huge usability advantage.
• Accessible: Cart flyouts are easy to access and designed to automatically appear when new items are added to the cart.

The downsides:

Actually there aren’t many so long as the flyout is done correctly.

Take this one for example:

• Poorly used space: There’s a lot of empty space here that could be better used to promote additional products, discounts, or payment options. And the buttons to add or remove products are so small they’re not likely to be used.

Here’s another one:

• Not Viewable: Although shoppers can see how many products they have in their cart, they can’t see what those items are nor are they able to add or remove multiple products from the same page. Instead, users have to click ‘View Cart’ where they can make adjustments as needed.

These design flaws can lead customers to abandon their shopping cart, decrease overall customer satisfaction, and forestall the growth of your online store.

So now that we’ve seen what not to do with cart flyouts, let’s take a look at ecommerce stores with cart flyouts we should all aspire to.

5 Cart Flyouts We're Into Lately

What truly makes or breaks a cart flyout is how intuitive and engaging it is.

Ask yourself:

• Can shoppers add or remove items with a single click?
• Are the subtotal and shipping costs clearly visible?
• Can you collapse the flyout with one click?
• Does it look fantastic?

Once you’ve checked ease of use, remember that the best cart flyouts are those that promote additional product discovery by including personalized product recommendations.

With those must-haves in mind, take a look at five cart flyouts we absolutely love.

Ned

Ned’s cart flyout really does it for us. It looks great and it's totally on brand. Shoppers can easily view the subtotal, the items in their cart, and can add and remove products with one click. Ned takes full advantage of the space by offering complimentary products to encourage product discovery and boost AOV. This cart also features a one-click switch-to-subscription option which has dramatically improved Ned’s subscriber count. It's clean as a whistle, too. 

12th Tribe

Clothing company 12th Tribe makes it easy for shoppers to see what they’re getting by featuring large product images next to handy options to add and remove items with a click. Shoppers can also see how far away they are from earning free shipping via the progress bar at the top. The 12th Tribe team doubles down on beautiful imagery, including recommended products in a grid that features nice big product images. The short message “Your outfit needs this” is a nice bit of encouragement for their shoppers.

Mixhers

What we love about this next example (in addition to the ease of use and visibility) is the creative design. Health and wellness brand Mixhers designed this custom cart flyout with dev support from the team at Electriq agency. It features a breakout menu offering personalized cross-sells, an option to upgrade to a subscription for a discount, and a checkbox to manage orders via SMS. Large images focus attention on the products which can be added to the cart with a single click. Slick. (And creative!)

Flaunt

Not only does Flaunt’s cart flyout include data-driven product recommendations, but it also dynamically populates and changes based on what shoppers add to their cart.

In this example, shoppers are presented with a similar phone case style they're likely to consider. Two phone rings are also recommended: one that matches the selected case, and one that matches the recommended case should they decide to switch. (Smart!) It’s a strategic way to include intelligent recommendations and increase overall cart value.

An eye-grabbing message at the top advertises sales promotions and the progress bar rewards more spending with free shipping. Super clean.

Magic Spoon

Magic Spoon’s cart boasts messaging and design that are completely on brand. The highlight here is the large Subscribe-And-Save button offering a 25% discount to entice customers to subscribe to items they’re already purchasing. Buyers can discover new items and add them with the click of the mouse, discounts make the recommended products more attractive, and the checkout button clearly calls shoppers to action. 

Dazzle Your Customers With A Great Cart Flyout

These are all great examples of cart flyouts that increase AOV, decrease cart abandonment, and improve the customer experience. And today, it’s easier than ever to build an optimized cart flyout.

Our Smart Cart is designed to be faster, smarter, and more flexible, providing shoppers with a truly modern shopping experience. With features like a free shipping bar, marketing messages, countdown timer, and more, brands can provide the personalized, convenient shopping experience today’s online shoppers have come to expect.

To learn more about our Smart Cart, check out our interactive Smart Cart demo.

•••

Try Rebuy free for 21 days.

Interested in partnering with Rebuy? Let's do it.

To keep up with the latest trends, platform updates, and more, follow us on LinkedIn.