Mini Cart

Overview

The Shopify Mini Cart is a compact shopping cart interface that provides customers with a quick and seamless way to view and manage the items in their cart without leaving the current page. It enhances user experience by reducing friction in the shopping process and encouraging conversions.

Features

• Real-time Cart Updates: Automatically updates when items are added or removed.
• Quick View: Displays a summary of cart items, quantities, and subtotal.
• Interactive Buttons: Allows users to modify quantities or remove items instantly.
• Seamless Checkout Link: Directs users to the checkout page efficiently.
• Customization Options: Can be styled and modified to match the store's branding.

The mini cart element is just the Cart Element modified to work inside a a dropdown, you can add inside same attributes and same elements you can find explained in the cart page

Mini Cart (Webflow Dropdown)

The mini cart element is just the Cart Element modified to work inside a native Webflow Dropdown.

Mini Cart

The Mini Cart is a compact shopping cart interface that provides customers with a quick and seamless way to view and manage the items in their cart.

Copy Element

Our mini cart element by default opens up whenever a customer adds a product to the cart.

You can disable this behaviour by removing the custom attribute, that is already inserted on our element:

data-open

on-add

Mini Cart Modal

The Mini Cart Modal component allows you to have a customized version compared to the native Webflow Dropdown Mini Cart.

Mini Cart Modal

The Mini Cart is a compact shopping cart interface that provides customers with a quick and seamless way to view and manage the items in their cart.

Copy Element

To personalize the content of the Mini Cart Modal, simply select the Dialog DOM element and add the following custom attribute, which will make the customizable modal appear in the designer.

open

true

The mini cart modal uses Motion One animations under the hood, you can modify them by adding the script below

<script>
window.cartInAnimation  = {
  opacity: [0, 1],
  scale: [0.9, 1],
}
 
window.cartInAnimationSettings = {
  duration: 0.5,
  easing: [0.25, 0.46, 0.45, 0.94],
}
 
window.cartOutAnimation = {
  opacity: [1, 0],
  scale: [1, 0.85],
}
 
window.cartOutAnimationSettings = {
  duration: 0.3,
  easing: "ease-in",
}
</script>

Those are our default values, you can modify them as you prefer!

Mini Cart (Webflow Interactions)

The Mini Cart (Webflow Interactions) component allows you to have a mini cart created directly with Webflow interactions

Mini Cart Interactions

The Mini Cart is a compact shopping cart interface that provides customers with a quick and seamless way to view and manage the items in their cart.

Copy Element

The interaction is applied on the click of a specific element that has the attribute

data-trigger

open

If you create your Mini Cart from scratch