---
description: >-
  Use options from this section to settings up the Cart popup appearance and
  cart functionality according to your preferences.
---

# Cart

#### **Action after adding to cart**

Use the proper option from the following drop-down list to decide the layout of the Cart popup.

Allow customers to view items added to the cart after clicking the "Add to cart" button by activating one of the options described below:

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

{% hint style="warning" %}
**Note!** To use the option, add the "[<mark style="color:blue;">Cart drawer</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/cart-drawer)" section and apply the settings provided within the section.
{% endhint %}

Below you can see how the cart drawer might be showing on desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FqevmZnHMdKruopWpemyx%2Fcart%20drawer_desktop.png?alt=media&#x26;token=bdd84a47-a52e-45f5-8413-4ac2c4e66afa" 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%2FKVxOe8aKF1oD345pfAYv%2Fcart%20drawer_mobile.png?alt=media&#x26;token=c2ad469d-0c81-4594-aea3-6f8803b8a099" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Show notification**. If you need to display the cart notification popup after pressing the "Add to cart" button, select the provided option. Unlike the cart drawer, this option allows showing only the last item added to the cart.

Here is how the cart notification is presented in the theme on desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fcx4NlQpR4cqi2KnMkuKM%2Fcart%20notification.png?alt=media&#x26;token=32c6859b-9ef6-4e25-82b7-21e0ac904c94" 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%2FrKqUP4qSgSatRre1RBt8%2Fcart%20notification_mobile.png?alt=media&#x26;token=20313720-eca6-4ebc-b190-8d4e49c7a66c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **No action**. This option deactivates the cart popup when pressing the "Add to cart" button. Visitors can view the list of products added to the cart when hitting the cart icon in the Header.

{% hint style="warning" %}
**Note!** Using the "Notification" and "No action" options, the response to pressing the cart icon depends on the next settings:

\*Once the "[<mark style="color:blue;">Cart drawer</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/cart-drawer)" section has been added, the theme will respond by opening the Cart drawer.

\*The customers will be shifted directly to the Cart page when clicking the Cart icon in the Header if the "[<mark style="color:blue;">Cart drawer</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/cart-drawer)" section is absent.
{% endhint %}

**Cart icon**

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

{% tabs %}
{% tab title="Cart" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FYiNbaus1OYx83UNOHndl%2Fcart%20icon_cart.png?alt=media&#x26;token=9e870b4d-1275-4ee6-b0f3-5b9c42d12514" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Basket" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F5myWCZg6KXsrBBdsHdgT%2Fcart%20icon_basket.png?alt=media&#x26;token=af0105f8-4b1b-42a1-8215-2865f079bb0e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bag" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FQsDC4Zp9CrnrNWzVXE0b%2Fcart%20icon_bag.png?alt=media&#x26;token=294a3984-81cc-4ace-a1f5-46d12f9bc370" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Free shipping progress bar

**Enable bar**

The Free shipping progress bar will be placed at the top of the Cart drawer, Cart page, and product pages as you enable the checkbox.

In the **"Free shipping value"** input field, add the limit price of the free shipping in the format equal to 1 USD = 100 cents.&#x20;

Eg.: 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%2Fld5crAQJg5OpcIQV5hO5%2Ffree%20shipping%20bar.png?alt=media&#x26;token=b8ac5699-d9fa-4311-bd32-1facd8758389" alt=""><figcaption></figcaption></figure>

If you operate more than one currency in your store, use the "|" as a separator. Add a value for each currency in the same order as displayed in the currency selector.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FrZyFEOVWpSG2CLvGuIw5%2Ffree%20shipping%20bar_value.png?alt=media&#x26;token=24a9901e-6ab8-4a6e-8812-15b2e4dd5db9" alt=""><figcaption></figcaption></figure>

### Cart countdown

**Enable 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%2FYE0PuAsRsH5aBixsXihP%2Fcart%20countdown_cart%20page.png?alt=media&#x26;token=bfb16eba-a05b-4a8e-b445-3a06f84237cd" alt=""><figcaption></figcaption></figure>

**Enable in cart drawer**

The countdown of the product's availability in your cart will be added to the top of the Cart drawer as soon as you activate the checkbox.

<mark style="color:orange;">**Note!**</mark> The feature is not available for the Cart notification popup.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FfoHo8JFb2AfkNwnttFNj%2Fcart%20drawer_countdown.png?alt=media&#x26;token=1feeb603-8b47-4109-9e02-207b2c29c083" alt=""><figcaption></figcaption></figure>

The minimal time for displaying items in the cart can be set to 1 minute, and the maximum to 60 minutes using the **"Counter reset time"** slider. Decide on the desired value according to your preferences.
