# Cart drawer

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

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 the cart abandonment rate of your store.

<figure><img src="/files/6RW1JWuKNf9ovVFLkLXc" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

## How to enable the cart drawer for your Shopify store

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

1. From the theme editor (Customize), navigate to **Theme settings** > **Cart**.
2. Set the **Cart type** as **Drawer**.
3. **Save** the changes.&#x20;
   {% endhint %}

{% content-ref url="/pages/eLsKasJgj5ZAS8dvxoOa" %}
[Cart](/hyper-theme/theme-settings/cart.md)
{% endcontent-ref %}

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

## How to customize your cart drawer

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

### General settings

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

* **Show cart note**: Allow customers to leave a note for their order.
* **Show shipping rates calculator**: Display a tool that lets customers estimate their shipping costs before they proceed to the checkout page.

### Free shipping goal

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

Enable this to display a progress bar indicating how much more the customer needs to spend to qualify for free shipping.

{% hint style="warning" %}
To have this work, make sure:

* You enter the **Free shipping minimum amount** in Theme settings > [Cart](/hyper-theme/theme-settings/cart.md)
* You have set up your **free shipping rates** in Shopify admin. [See how](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/setting-up-shipping-rates#create-free-shipping-rates)
  {% endhint %}

{% hint style="info" %}
The Free shipping goal is based on the store's primary currency. If customers switch to another currency, the goal will be calculated using Shopify market [exchange rates](https://help.shopify.com/en/manual/markets/pricing/exchange-rates).
{% endhint %}

### Cart recommendation

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

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 %}


---

# 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.foxecom.com/hyper-theme/pages-global-sections/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.