# Cart drawer

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FOZAM3DnCBlSM9wUsCpOD%2FUntitled.png?alt=media&#x26;token=04540f8e-1002-44a9-b670-4304f399f895" alt=""><figcaption></figcaption></figure>

## **Adding a Section**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FPw7S7bAukn0SnWjOXhFP%2FUntitled%201.png?alt=media&#x26;token=301fc126-21be-4138-b736-d3372847bfcc" alt=""><figcaption></figcaption></figure>

The section is static, it is added initially and cannot be deleted. The section will be added if the **Drawer type** is selected in the **Cart global settings**.

## **Section settings**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FiVwICtSrGNksg83aI8vP%2FUntitled%202.png?alt=media&#x26;token=f2ae9c43-d56c-4ccf-8262-91c9550c9851" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - the setting allows you to set the text for the section title. By default, it is taken from translations;
2. **`Show items count in the cart`** - the setting is responsible for displaying the number of products in the cart;
3. **`Show gift wrap button`** - the setting allows you to enable the Show “Add gift box” button in the Cart drawer. You can learn more about the “Gift wrap button” in the “[Gift wrap product](https://www.notion.so/Gift-wrap-product-f6bde6055b654434bf088a88e76138f5?pvs=21)” section.

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F2kTSjkPfxcNlOU0qFNRb%2FUntitled%203.png?alt=media&#x26;token=c6c4bd6c-4113-43b6-bafc-20efed98b8ff" alt=""><figcaption></figcaption></figure>

### **Upsell settings**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FvtEwASWo2Pedw7f4Hy5K%2FUntitled%204.png?alt=media&#x26;token=c3f35887-7101-4cc9-873d-677a3bcd0d83" alt=""><figcaption></figcaption></figure>

1. **`Upsell heading`** - the setting allows you to set a title for a popup with upsell products.

## **Blocks settings**

Blocks are introduced to provide dynamic content in the cart. Blocks can also be swapped to get different combinations. Usually, this feature is not available in other themes.

### **Block Items**

**Block limit - `1`**

The block is responsible for displaying the products in the cart. The block has no settings.

### Block Suggested Items

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FnGzorExlLhjpW7sErtUv%2Fcart-drawer1.png?alt=media&#x26;token=d3a2db7a-b7a5-413f-b4f3-841efb97e8e9" alt=""><figcaption></figcaption></figure>

The block is responsible for displaying upsell products in the cart.

1. **`Heading`** - the setting allows you to set the text for the block title;
2. **`Products`** - the setting allows you to select products that act as upsells. **Limit** - `12` products.
3. **`Opened on load`** - the setting allows you to specify whether a dropdown with upsell products will be opened when opening the cart.

### **Block Free Shipping Progress**

**Block limit - `1`**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FKbV5NlCEtLqkzU6tCKFO%2FUntitled%206.png?alt=media&#x26;token=c44d6dad-ae33-494a-9804-597d1dc642ff" alt=""><figcaption></figcaption></figure>

Block is responsible for displaying the Shipping bar.

1. **`Free shipping amount`** - the setting allows you to set the amount of US money that the user must spend to fill the bar;
2. **`Shipping message`** - the setting allows you to set the text of the message that the user sees when the bar is not filled;
3. **`Shipping congratulatory message`** - the setting allows you to customize the text of the message that the user sees when the bar is full;
4. **`Icon`** - the setting allows you to set the image in the congratulatory message.

### Colors

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FU8KGEWo7lTiSVYq0aHKx%2FUntitled%207.png?alt=media&#x26;token=aae9031b-cd12-424d-b792-40cea2ab7a53" alt=""><figcaption></figcaption></figure>

1. **`Progress bar background color`** - the setting allows you to set the background color for the progress bar;
2. **`Progress bar fill color`** - the setting allows you to set the fill color for the progress bar.

### **Block Richtext**

**Block limit - `1`**

### General

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FSb1i0uvfBVq5mG36gjEZ%2FUntitled%208.png?alt=media&#x26;token=64416032-b2f1-49f1-aa83-94d6bbd5b580" alt=""><figcaption></figcaption></figure>

1. **`Text`** - the setting allows you to set the text content;
2. **`Icon`** - the setting allows you to set the image before the text.

### Colors

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FByjp7FAQk4neaQ5SJoWk%2FUntitled%209.png?alt=media&#x26;token=cd3b0449-a744-4673-8f2f-96c048aa95cb" alt=""><figcaption></figcaption></figure>

1. **`Text`** - the setting allows you to set the color for the text;
2. **`Background`** - the setting allows you to set the background color for the block.

## **Additional information**

1. **Block Suggested Items.** Products are not displayed if they are already added to the cart;
2. **Block Suggested Items.** When you click on the `add to cart` button, **Quick View** is called;