# Mini Cart

A mini cart is a great feature that lets users quickly view their cart contents without going away from their current page. Located under **Appearance -> Customize -> WooCommerce -> General Settings**, the **Mini Cart** settings enable you to control how this cart preview appears and behaves, providing a seamless shopping experience.

There are two types of mini cart, and they are:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FfdtZmsCwnfpSLlAh2kzH%2Fwoocommerce-general-settings-mini-cart-type.jpg?alt=media&#x26;token=3a4f459c-ad27-4022-a77a-ea49af48ccab" alt="" width="335"><figcaption></figcaption></figure>

* **Drawer**: Appears as a sliding panel from the side of the page.
* **Popup**: Displays as a pop-up window over the current page.

<div><figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FVPHHmNfv41jvb5pontl5%2Fwoocommerce-general-settings-mini-cart-type-1.jpg?alt=media&#x26;token=b654e149-952c-4a0d-9e94-111a442a4b72" alt="" width="375"><figcaption><p>Drawer Type</p></figcaption></figure> <figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FB12Ow1MFq8WMHN2pUS9I%2Fwoocommerce-general-settings-mini-cart-type-2.jpg?alt=media&#x26;token=7b555e2f-e48f-4c63-b127-0131ef86acbe" alt="" width="375"><figcaption></figcaption></figure></div>

### Options (for Drawer)

* **Animation**: Select the animation style for the drawer’s appearance.
  * **Slide**: The drawer slides into view from the side.
  * **Fade**: The drawer fades in gently.
* **Cart Button**: Toggle the visibility of the "Go to Cart" button within the drawer.
* **Max Width**: Set the maximum width of the drawer, with a range from 300 to 700 pixels.

### Style (for Drawer)

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FiGwwslSC6pAa3xwuQM8E%2Fwoocommerce-general-settings-mini-cart-style.jpg?alt=media&#x26;token=d86ee40e-3004-4a87-9a19-c626b763536a" alt="" width="332"><figcaption></figcaption></figure>

* **Separators**: Choose the color of the separators within the drawer.
* **Background**: Select the background color for the drawer.
* **Headings**: Pick the color for headings in the drawer.
* **Text**: Choose the color for text within the drawer.
* **Padding**: Adjust the inner padding of the drawer, with responsive options to ensure it looks good on all devices.
* **Border**: Define the border style around the drawer, including responsive options.
* **Border Radius**: Set the border radius to create rounded corners, with responsive options available.
* **Box Shadow**: Add a shadow effect to the drawer for a more pronounced appearance.
* **Offset**: Adjust the drawer’s position relative to the edges of the browser window. This includes vertical and horizontal offsets, allowing you to fine-tune where the drawer appears on the screen.