# Cart

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

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

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 lets you display 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 pop-up after pressing the "Add to cart" button, select the provided option. Unlike the cart drawer, this option allows you to display 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 disables the cart pop-up, which appears when the "Add to cart" button is clicked. Visitors can view the list of added products to the cart after 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. This option activates the "Free shipping value" input field.

In the **"Free shipping value"** input field, enter the free shipping limit in the format 1 USD = 100 cents.

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>

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

### Cart countdown

**Enable in cart**

Tick the checkbox to place the countdown on the Cart page under the page title. The "Counter reset time" will appear below after enabling the current option.

<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**

Once checked, a countdown timer will be added to the top of the Cart drawer to indicate when the items are added to the Cart. The "Counter reset time" will appear below after enabling the current option.

<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%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. Set the desired value according to your needs.