# Header

What is Header?

The **Header** is the top section of your cart drawer. It shows your cart title (with the live item count) so customers know exactly what they are looking at the moment the drawer opens.

How to set up?

#### Step 1: Open the Header settings

1. Go to **AOV.ai Cart Drawer > Cart Editor**.
2. In the left settings menu, click **Header**.

The Header settings panel appears on the left, with the live cart preview on the right.

<figure><img src="https://2753131461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5qQ2eqjWrar8oh2L4x1y%2Fuploads%2FC9LjA3mOjm2WGgaRJr7b%2Fstep-1.png?alt=media&#x26;token=2c316e1d-8b13-4fe2-9fdf-4d58e08fb6e0" alt=""><figcaption></figcaption></figure>

#### Step 2: Set the cart title

The **Cart title** is the text that appears at the top of the drawer

1. In the **Cart title** field, enter the text you want to display.
2. (Optional) Click **Add variable** and insert `{{cart_quantity}}` to show the live item count next to your title.

<figure><img src="https://2753131461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5qQ2eqjWrar8oh2L4x1y%2Fuploads%2F0zbRvaeoA8VFKsZ6oerg%2Fstep-2.png?alt=media&#x26;token=e4a11fdc-de91-4f93-89c4-f1a0a60bf876" alt=""><figcaption></figcaption></figure>

#### Step 3: Choose the text alignment

Decide where the cart title sits in the header.

* **Left** — title aligns to the left of the drawer.
* **Center** — title sits in the middle of the drawer.

<figure><img src="https://2753131461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5qQ2eqjWrar8oh2L4x1y%2Fuploads%2FQLaV3MQpQupG74vRQyOC%2Fstep-3.png?alt=media&#x26;token=eee25323-fb73-4882-a679-1f596930b074" alt=""><figcaption></figcaption></figure>

#### Step 4: Set the font weight

Pick how thick the title text should look.

* **Normal** — standard weight, lighter look.
* **Bold** — heavier weight, stronger emphasis.

<figure><img src="https://2753131461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5qQ2eqjWrar8oh2L4x1y%2Fuploads%2FAF82L0a81ohvoaTWa8iJ%2Fstep-4.png?alt=media&#x26;token=54c0cfef-cb6b-4e01-a895-abea070b240a" alt=""><figcaption></figcaption></figure>

#### Step 5: Adjust the font size

Drag the **Font size** slider to set the title size between **8 px** and **24 px**. Use the live preview on the right to find the size that fits your design.

<figure><img src="https://2753131461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5qQ2eqjWrar8oh2L4x1y%2Fuploads%2F3uUl2vYNax7gXYnoxMRk%2Fstep-5.png?alt=media&#x26;token=640ab38e-a121-47fa-9670-efe1df3830c5" alt=""><figcaption></figcaption></figure>

Once the header looks the way you want, click **Save** at the top right to apply your changes.