# Mini Cart
{% columns %}
{% column %}
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.
{% endcolumn %}
{% column %}
{% endcolumn %}
{% endcolumns %}
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.
{% code title="Webflow" fullWidth="false" %}
```
li-element = direct-add-to-cart
```
{% endcode %}
#### Mini-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.
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart-toggle
```
{% endcode %}
#### Mini-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.
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart-item-count
```
{% endcode %}
#### Mini-Cart Empty
This element is displayed when the mini-cart is empty and can be placed anywhere within the theme.
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart-empty
```
{% endcode %}
### Mini-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.
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart
```
{% endcode %}
{% tabs %}
{% tab title="mini-cart" %}
**mini-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`
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart-container
```
{% endcode %}
Within this element, use the `li-js-object` to showcase the cart information. Here's an example of the objects available for use:
* `total.price`
* `total.discount`
* `total.original_total_price`
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title=" mini-cart > mini-cart-container" %}
**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`
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart-container
```
{% endcode %}
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title=" mini-cart > mini-cart-container > mini-cart-full" %}
**mini-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`
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart-item
```
{% endcode %}
Within this element, use the [`li-js-object`](#li-object-vs-li-js-object) to showcase product information. Here's an example of available objects for use:
* `product.title`
* `product.featured_image`
* `product.vendor`
* `product.price` (name: [`li-js-price`](#li-js-price))
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title=" mini-cart > mini-cart-container > mini-cart-full > mini-cart-item" %}
**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`
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart-item-increase
```
{% endcode %}
**mini-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`
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart-item-decrease
```
{% endcode %}
**mini-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`
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart-item-remove
```
{% endcode %}
**mini-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`
{% code title="Webflow" fullWidth="false" %}
```
li-element = mini-cart-item-quantity
```
{% endcode %}
{% endtab %}
{% endtabs %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.liquiflow.app/add-ons/liquiflow-elements/mini-cart.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.