> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/guides/cart-drawer.md).

# Cart Drawer

## Overview

In a **Shopify store**, the **cart drawer** (also called **mini cart**, **slide-out cart**, or **side cart**) is a user interface element that allows customers to view and manage the items in their shopping cart **without leaving the current page**.

Here we have a total of 13 blocks of Cart Drawer:

| [Announcement](/guides/cart-drawer/announcement.md)                             | [Icon With Text](/guides/cart-drawer/icon-with-text.md)               |
| ------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| [Countdown Timer](/guides/cart-drawer/countdown-timer.md)                       | [Complementary Product](/guides/cart-drawer/complementary-product.md) |
| [Free Shipping Progress Bar](/guides/cart-drawer/free-shipping-progress-bar.md) | [Estimate Shipping](/guides/cart-drawer/estimate-shipping.md)         |
| [Promotional Banner](/guides/cart-drawer/promotional-banner.md)                 | [Cart Notes](/guides/cart-drawer/cart-notes.md)                       |
| [Image With Text Card](/guides/cart-drawer/image-with-text-card.md)             | [Gift Wrapping](/guides/cart-drawer/gift-wrapping.md)                 |
| [Optional Services](/guides/cart-drawer/optional-services.md)                   | [Discount Code](/guides/cart-drawer/discount-code.md)                 |
| [Payment Icons](/guides/cart-drawer/payment-icons.md)                           |                                                                       |

{% hint style="warning" %}
To ensure the cart drawer opens and functions correctly, you must use Smind’s sections (not a custom or theme-default button), because it relies on Smind’s built-in Add to Cart buttons and header.

**Required sections**

* **Header** – Free/Pro 

**Use one of these sections**

* **Collection Page** – Pro
* **Featured Product** – Pro
* **Featured Collection** – Free/Pro
* **Product Bundle** – Pro
* **Product Detail** – Free / Basic / Pro
* **Shop the Look** – Pro
  {% endhint %}

## How To Install?

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FYkc4tennwYu6iFFOUUSJ%2FCart%20Drawer.mp4?alt=media&token=25e1ea81-2589-4312-8671-5613284c6479>" %}

To install the **Cart Drawer** in our app. You can follow these steps and the images below:

1. From our app, click **Library**.
2. In the **Section** tab, select the category of **Cart Drawer** section
3. Select the Cart Drawer section, click Install and Customize

<figure><img src="/files/ONEqVqrnuW9cmFEPk8C9" alt=""><figcaption></figcaption></figure>

4. In the theme editor sidebar, click **Add Section** on the **Global** section.&#x20;

{% hint style="warning" %}
If you don’t place this section inside the **Global Section**, the cart drawer **will not show up or work correctly.**
{% endhint %}

5. Search **Cart Drawer** section and click to import it.

<figure><img src="/files/dSHKpufxuWo2IYZICgVM" alt=""><figcaption></figcaption></figure>

6. To customize the Cart Drawer section, click to the Cart Drawer

* **Show count items:** The header so it either shows or hides the total item count in the drawer title.
* **Show vendor**: Display the product vendor/brand name inside the cart drawer.
* **Show shipping/tax notice**: Show a notice about shipping fees or tax information. Configure your shipping policy in **Settings → Policy → Shipping Policy**&#x20;
* **Enable cart sharing**: Adds a “Share your cart” panel (with a copyable link) so the customer can send their current cart to others.
* **Show terms of service checkbox:** Show a notice about terms of services. Configure your shipping policy in **Settings → Policy → Terms of Service**
* **Show view cart button**: Display a "View Cart" button that links to the full cart page.
* **Collection**: Choose a collection to display when the cart is empty.

<figure><img src="/files/QYo5xHMp4fwXQaHGpyNm" alt=""><figcaption></figcaption></figure>

## Frequently Asked Questions (FAQs)

## Q: Why can’t I find the Cart Drawer in my Shopify store after installing it?

To make sure your **Card Drawer** section appears correctly, check these two things:

1. **Activate SMI Theme Helper**

Go to your Shopify **Theme Settings** → **App embeds** and make sure **SMI Theme Helper** is turned ON. This helper enables the app blocks to work properly inside your theme.

<figure><img src="/files/DTrwb5fsSQmHwZ8LzPwT" alt=""><figcaption></figcaption></figure>

2. **Add the Cart Drawer to Your Current Theme**

After installing a Cart Drawer from the Smind Library, you still need to add it manually to your **current theme’s template.**

* From **Settings** in Smind Sections app, scroll down to choose a theme to work on, you need to make sure that this theme is your current theme.

<figure><img src="/files/q4G5LEFkrfhoYafmdPK0" alt=""><figcaption></figcaption></figure>

* Open Shopify → **Online Store → Themes → Customize.**

<figure><img src="/files/NREvVD85CcS7LzIwAC42" alt=""><figcaption></figcaption></figure>