# 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 %}

<figure><img src="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2F4enbx45s1NeyJeqZfyWE%2F65480e9268fb6e73e3695dda_liquify-mini-cart.webp?alt=media&#x26;token=da1e67a2-ff82-489e-b8e0-233ea8829166" alt=""><figcaption></figcaption></figure>
{% 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 <a href="#add-to-cart" id="add-to-cart"></a>

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 <a href="#mini-cart-toggle" id="mini-cart-toggle"></a>

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 <a href="#mini-cart-item-count" id="mini-cart-item-count"></a>

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 <a href="#mini-cart-component" id="mini-cart-component"></a>

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 %}