# Cart

{% hint style="info" %}
**Theme settings -> Cart**
{% endhint %}

## **Cart icon**

Select the **Cart icon** design for the store. The theme offers three options:

{% tabs fullWidth="false" %}
{% tab title="Cart" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F3qmoDXgn7Fcm8HixqkW3%2Fts_cart_cart.png?alt=media&#x26;token=40cdb4ce-7fff-43ba-9c9e-66799b50ce88" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bag" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FASbJ5AYBx5yKjfxS4UR9%2Fts_cart_bag.png?alt=media&#x26;token=5d7f79e7-feef-44d9-8bb6-1b474a26df4c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Basket" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FU3cdIdaUY9FsuL0jbXVm%2Fts_cart_basket.png?alt=media&#x26;token=7cc3b8b9-65d7-46c6-85ca-bfacfce2ecdb" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## **Cart type**

The theme features multiple shopping cart modes. Simply select one from the **Cart Type** options to apply it.

* **Drawer**. Use the option to display the Cart drawer on the right of the screen whenever a product is added to the cart. The Cart drawer will automatically appear on every page after pressing the "Add to Cart" button.

> **Note:** The Cart drawer is disabled on the Cart page as the page already serves this function.

* **Page**: Select this option to redirect customers to the Cart page when they click the Add to Cart button or the Cart icon in the header. Utilize the **Items** and **Subtotal** static sections on the **Cart** page to modify its layout. Read more details below.
* **Popup Notification**: Displays the last product added to the cart in a popup. Clicking the Cart icon in the header redirects visitors to the Cart page.
* #### Hide. Catalog Mode
* Selecting this option will disable the Cart drawer, Popup notification, and Cart icon in your store's Header. Your store will function solely as a display catalog.

Below is a summary of the different types of carts:

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

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FNfpiXmyQ2caCfHKb4NvC%2Fts_drawer.png?alt=media&#x26;token=a153f292-7701-4040-a29d-6469e4b856c4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Popup notification" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FPM4PpfBn64CY6jJfraHo%2Fts_cart_pn.png?alt=media&#x26;token=0545d5c3-6059-4b5d-86b6-4d7f0b4e3713" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

The following options can be enabled/disabled:

* **Enable cart note.**

Add a special instructions input field to the Cart drawer order.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FxLJbd2vuxs1MsMCtCIaS%2Fts_cart_note.png?alt=media&#x26;token=45c3ef98-597a-4439-944f-b8594786ddfd" alt=""><figcaption></figcaption></figure>

You can view the order details in Shopify admin by navigating to Orders.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FshaXh6sb2GqePDnTF2Rf%2Forder_note.png?alt=media&#x26;token=b4cfeb05-ded7-42f5-92b5-d21b233ea78e" alt=""><figcaption></figcaption></figure>

* **Enable discounts in cart**
* **Installments**
* **Enable checkout button**
* **Enable the accept terms checkbox**

Works with the checkout button. You can find the text in the language editor under the "General" tab.

* **Accelerated checkout buttons**

Allows buyers to check out faster and can improve conversion. [Learn more](https://help.shopify.com/manual/online-store/dynamic-checkout)

Here's an example illustrating some previously mentioned settings:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FcbtjhM7PTHLD2Pdb5ifd%2Fts_cart_some.png?alt=media&#x26;token=d050c6f5-5ec8-4d89-bbcf-ba44da9c398f" alt=""><figcaption></figcaption></figure>

***

## Cart drawer <a href="#cart-drawer" id="cart-drawer"></a>

**Show vendor**

Hide/show the vendor in the cart drawer

**Enable review stars**

Visible when product suggestions enabled. An app is required for product ratings.

**Collection**

Select a **Collection** to display products in the cart drawer if it is empty.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FE3JeGSap6C65QyU704oL%2Fts_cart_collect.png?alt=media&#x26;token=a5994c09-2c29-4006-9611-007a8f58552e" alt=""><figcaption></figcaption></figure>

**Image ratio**&#x20;

The option controls the width-to-height ratio of images in the cart drawer. The theme offers four options to resize images: **Auto**, **Portrait (3:4)**, **Landscape (4:3)**, **Square (1:1)**, and **Round (1:1)**.

***

## **Cart page** <a href="#cart-page" id="cart-page"></a>

**Continue shopping link**

Set the link for the continue shopping button for both cart states. The empty and non-empty cart.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FGCcRfkRoOlVkZIQlPY4V%2Fts_cont_shop.png?alt=media&#x26;token=0f9c2735-994d-42eb-bc44-569d860751e6" alt=""><figcaption></figcaption></figure>
