Mini Cart
The Mini-Cart is a widely used component in the E-Commerce realm. It pops up when a product is added to the cart and usually slides in from the right side. We avoid using the Webflow-Ecommerce Elements in Webflow due to its excessive and unnecessary JavaScript load we don't need in Shopify. Instead, in Our Starter Theme, you'll discover a header containing all the necessary elements.
Before we explore the component further, here are some versatile elements that can be used throughout your entire Webflow project:
Add-to-Cart
Place this element within a product item. It adds the current variant to the cart and triggers the Mini-Cart to open upon clicking.
li-element = direct-add-to-cartMini-Cart Toggle
This element toggles the mini-cart's visibility upon clicking and can be positioned anywhere within the theme. Typically, it's used as a cart icon in the navbar for easy access.
li-element = mini-cart-toggleMini-Cart Item Count
This element displays the current number of items in the cart and can be positioned anywhere within the theme. It's commonly used to show the item count in the navbar.
li-element = mini-cart-item-countMini-Cart Empty
This element is displayed when the mini-cart is empty and can be placed anywhere within the theme.
li-element = mini-cart-emptyMini-Cart Component
Discover all the essential elements required for and usable within the mini cart here. The grey outlines show how the elements should be nested within one another.
mini-cart: This element holds and shows the component. Every following element should go inside this one.
li-element = mini-cartmini-cart-container: This element is the actual Mini-Cart and appears animated when the is-open class is applied. You can only position this element once on a page. It needs to be inside the mini-cart
li-element = mini-cart-containerWithin this element, use the li-js-object to showcase the cart information. Here's an example of the objects available for use:
total.pricetotal.discounttotal.original_total_price
mini-cart-full: This element should be placed within the mini-cart-container element and will be shown when the cart has items inside. It needs to be inside the mini-cart-container
li-element = mini-cart-containermini-cart-item: This element should be placed within the mini-cart-full element and represents an individual item within the Cart. It needs to be inside the mini-cart-full
li-element = mini-cart-itemWithin this element, use the li-js-object to showcase product information. Here's an example of available objects for use:
product.titleproduct.featured_imageproduct.vendorproduct.price(name:li-js-price)
mini-cart-item-increase: This element should be nested inside the mini-cart-item and can be added to a div to increment the product quantity in the cart. Change the Cursor to pointer for a better usability. It needs to be inside the mini-cart-item
li-element = mini-cart-item-increasemini-cart-item-decrease: This element should be nested inside the mini-cart-item and can be added to a div to decrease the product quantity in the cart. Change the Cursor to pointer for a better usability. It needs to be inside the mini-cart-item
li-element = mini-cart-item-decreasemini-cart-item-remove: This element should be nested inside the mini-cart-item and can be added to a div to remove the product from the cart. Change the Cursor to pointer for a better usability. It needs to be inside the mini-cart-item
li-element = mini-cart-item-removemini-cart-item-quantity: This element should be placed within the mini-cart-item and connected to a div. The div will be replaced by an input field, allowing the customer to adjust the quantity of the item. It needs to be inside the mini-cart-item
li-element = mini-cart-item-quantityLast updated
Was this helpful?