> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS

> Write CSS to customize the design of your cart drawer.

# Overview

This section allows you to change the look and feel of existing cart elements or apply styles to custom HTML added through the editor.

## **Where to Find It**

Go to:\
**Upcart > Cart Editor > Settings > Custom CSS**\
Located directly below the Custom HTML section.

## **How It Works**

You can add CSS to:

* Style default cart elements
* Modify the appearance of custom HTML
* Adjust spacing, alignment, typography, and more

As you type, an **auto-complete popup** will suggest valid Upcart selectors to help speed up editing. Selecting a suggestion will auto-complete the rule and help you structure your code.

## **Using Selectors**

Upcart provides a wide range of custom selectors. Click **"Show list"** to view all available options.\
Avoid using global selectors like `body`, `div`, or `h3` unless scoped with `.upcart-cart` to prevent unintentional changes to your storefront.

Example (safe selector):

```
.upcart-cart h3 { font-size: 20px; }
```

## **Example: Thank You Message Styling**

Suppose you added this custom HTML below the checkout button:

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

Without CSS, the message will look plain. To style it:

```
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

## Support for Customizations

Upcart Support cannot assist with implementing or debugging custom CSS.\
For advanced styling help, we recommend working with a Shopify Expert.

[See Shopify Experts](https://www.shopify.com/partners/directory)