# Cart drawer

{% embed url="<https://youtu.be/5JUIETg3OMI>" %}

Cart drawer (also known as the slide-out cart, or side cart) allows customers to view and manage their shopping cart without leaving the current page.&#x20;

Overall, a cart drawer is useful for improving the user experience and increasing conversions to an online store. By giving an enhanced customer experience, you can reduce cart abandonment rate of your store.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fks26HRur3ZHXzewnBerW%2Fimage.png?alt=media&#x26;token=8469f770-1e4d-4467-a37d-d896c5b82bc4" alt=""><figcaption></figcaption></figure>

## How to enable the cart drawer for your store

{% hint style="success" %}
Steps:

1. From the theme editor (Customize), navigate to **Theme settings** > **Cart**.
2. Set the **Cart type** as **Drawer**.

<img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F6tflvVq5N8DWbCBkrIfe%2Fimage.png?alt=media&#x26;token=f541b2d6-a193-478e-9770-350567374bb6" alt="" data-size="original">

1. Change the **cart icon** and **cart empty recommendations** if needed.
2. **Save** the changes.&#x20;
   {% endhint %}

## How to customize your cart drawer

### General settings

* **Show cart note**: To allow customers to leave a note for their order.
* **Show cart discount**: To allow customers to apply discount code to their order.
* **Show shipping rates calculator**: To display a tool that lets customers estimate their shipping costs before they proceed to the checkout page.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FLzwTcAGzUVkwFIr7ctlC%2Fimage.png?alt=media&#x26;token=95445fae-a98a-4dec-b1ce-4e060a40e06a" alt=""><figcaption></figcaption></figure>

### Free shipping goal

Offering free shipping can reduce cart abandonment and even entice customers to make a purchase. With Sleek, you can set up a free shipping message based on orders over certain order values.

{% hint style="info" %}
Set up Free shipping goal in Theme settings > [cart](https://docs.foxecom.com/sleek-theme/theme-settings/cart "mention")
{% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FgXreECueMlsbTb3FTDDh%2Fimage.png?alt=media&#x26;token=899c5802-86f2-449f-955a-5736da19ddfc" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Make sure you have set up your free shipping rates. [See how](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/setting-up-shipping-rates#create-free-shipping-rates)
{% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FKwu5gcUvopwbfRBppzCB%2Fimage.png?alt=media&#x26;token=dfbcd668-2635-44ca-a564-aa780772a34a" alt=""><figcaption></figcaption></figure>

### Cart recommendation

The **Cart recommendation** presents complementary product recommendations upon cart addition. The recommendations are dynamic and based on the items in your cart. They change and improve with time.

{% hint style="warning" %}
[Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app is required to display product recommendations.
{% endhint %}

{% hint style="info" %}
To learn more about the recommendation logic, see [Shopify's Recommendations](https://shopify.dev/docs/themes/product-merchandising/recommendations).

To **customize the recommendation list** displayed on your product page and cart recommendations, see [Shopify Help Center.](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)
{% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FR0K0GEvWgVyFS3lCOi5f%2Fimage.png?alt=media&#x26;token=f8acc8ea-7286-4d0a-b0f8-6e6fd8395d0f" alt=""><figcaption></figcaption></figure>