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


---

# 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.smind.io/guides/cart-drawer.md?ask=<question>
```

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.