> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/cart.md).

# Cart

Use options from this section to set up the Cart popup appearance and cart functionality according to your preferences.

**After adding to cart**\
Determine the layout of the Cart drawer using one of the options from the drop-down.

{% hint style="warning" %}
**Note!** The "[<mark style="color:blue;">Cart drawer</mark>](/unicorn-shopify-theme/section-groups/header-drawers/cart-drawer.md)" section is required to use the cart drawer and cart notification. Apply the necessary settings provided within the section.\
Customers can view items added to the cart after clicking the "Add to cart" button.
{% endhint %}

* **"Open cart drawer"**. This option lets you display a list of items in the cart drawer as a customer adds each following product to the cart.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F8n4OfZlpRHTK2OKggTUY%2Fcart%20drawer_desktop.png?alt=media&amp;token=e0cb8f4a-5bf4-4bec-be84-8a0a79bd32e8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fiax4V0XVspUGIYf8GhdD%2Fcart%20drawer_mobile.png?alt=media&amp;token=1d897d9c-0967-43d9-b8ac-743a18436aea" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **"Show cart notification"**. Display a pop-up notification when an item is added to the cart after the "Add to Cart" button is clicked. Unlike the Cart drawer, this option only displays the most recently added item.

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FWdsWMAnMEEsOPRbpwA2o%2Fcart%20notification_desktop.png?alt=media&amp;token=e18e0b54-723c-4c38-adcf-fc3a5b06aa1e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FbycZqLM6OQVTD1jOFItq%2Fcart%20notification_mobile.png?alt=media&amp;token=09dc8d50-47db-45fa-b9e7-a7df5b1f0b30" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **"Do nothing"**. Turns off the cart drawer and popup displayed after a product is added to the cart. The cart page remains accessible through the Cart icon in the Header.

**Cart icon**

{% hint style="info" %}
View the examples of the cart icons in the following demos:

* **Basket** - [<mark style="color:blue;">DEMO</mark>](https://unicorn-broad.myshopify.com/)
* **Bag** - [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-flex.mpthemes.net/)
  {% endhint %}

The cart icon in the Header and the "Add to cart" button can be changed to "Cart", "Basket", or "Bag" using the following selector.

***

### Free shipping progress bar

**Show progress bar**\
Displays a free shipping progress bar in the cart drawer, on the cart page, and on product pages. This option activates the "Free shipping threshold" input field.

**Free shipping threshold**\
Use the field to enter the free shipping limit in the format 1 USD = 100 cents.

Example: 50 USD = 5000 cents, 100 USD = 100000 cents, etc.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FbyDLy8NE3LAeouvFoBcZ%2Fcart_free%20shipping.png?alt=media&amp;token=d0ae2eff-ed7a-4dda-8105-042d0cf34ff9" alt=""><figcaption></figcaption></figure>

If your store offers multiple currency options, apply settings per currency, separating them with the "|" symbol. Add the value for each currency in the same order as it appears in the currency selector.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FiysABFnMxxxXcmrRMepi%2Fcart_free%20shipping%20currencies.png?alt=media&amp;token=5e6884a0-5d91-4af5-bcf5-0f2f8ad4919e" alt=""><figcaption></figcaption></figure>

**Background**\
Change the background color of the Free shipping bar using the paint palette.

***

### Cart countdown

**Show in cart**\
Tick the checkbox to place the countdown on the Cart page under the page title.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FBNAOveOEBBTXGPI8MFru%2Fcart_cart%20countdown.png?alt=media&amp;token=f4bb1b65-f70e-49d2-86b8-7a5fffbdbbc4" alt=""><figcaption></figcaption></figure>

**Show in cart drawer**\
Displays a countdown timer at the top of the Cart drawer to show the remaining time before the product reservation expires.\ <mark style="color:orange;">**Note!**</mark> The feature is not available for the Cart notification pop-up.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FJs0SdxvzlEGFhej0hOIj%2Fcart%20drawer_cart%20countdown.png?alt=media&amp;token=a5b0cd44-a8d9-4250-bf44-0b3c5dcb5108" alt=""><figcaption></figcaption></figure>

**Counter reset time**\
The minimum time for displaying items in the cart can be set to 1 minute, and the maximum to 60 minutes. Set the desired value as needed.