# Cart Page

The cart page page has 2 states. 

```
[nc-cart]
```

1. Empty Cart state which is the state of the cart page when a customer has not added any items to their cart. This state looks like:

   <figure><img src="https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FuwTe6WPo4r8F2AWneXBX%2Fimage.png?alt=media&#x26;token=f81db028-c46d-47d6-b4f7-53ac0f3179ff" alt=""><figcaption></figcaption></figure>
2. The state of the cart when a customer has added a product to their cart looks like:&#x20;

   <figure><img src="https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FqZWwavrZCznPjNxcHH5E%2Fimage.png?alt=media&#x26;token=2a784bd5-e54f-49cb-87c4-4254b27aac94" alt=""><figcaption></figcaption></figure>

If your product has variations a customer will be able to update their product options directly from the cart page.&#x20;

{% hint style="info" %}
The cart page component is not complete and has a few bugs that need to be fixed.
{% endhint %}

SEE ALSO: [CART DRAWER](https://docs.northcommerce.com/north-commerce/shortcodes/cart-drawer)