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

{% 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FN2y6LXiPLPaGv5mJ82Im%2FCart%20Drawers%202%20(1).jpg?alt=media&#x26;token=d09923f6-1656-4df7-9eb3-4a438139a18b" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FX0XIa9URf4ZgzW7kZ37D%2FCart%20Drawers%203%20(1).jpg?alt=media&#x26;token=0356622d-4297-4c6c-9618-8a4fdad19d77" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FyAe4bTbbFILY4yG3RdKG%2FDiscount%20Code%203.jpg?alt=media&#x26;token=ba804d2c-c6fb-4590-b294-e3522e855254" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fo9x47j7GgKnYbqNVkuUf%2FFAQs%20(1).jpg?alt=media&#x26;token=5d19f8d9-f74b-4c8c-ac49-5d493a1dfc20" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F9CJ4uWmQcWVvL3tLneK2%2FFAQ%20Product%20Block%20(2).jpg?alt=media&#x26;token=5f8a8c68-16c1-466b-ad4a-366bb3ad0974" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fn7sXID9MzVMR8yjimz6g%2FFAQ%20Product%20Block%20(1)%20(1).jpg?alt=media&#x26;token=19399140-0c2a-409c-ab67-e2e035493f36" alt=""><figcaption></figcaption></figure>