---
title: Drawer design
description: Change the drawer colors, overlay, corner radius and dark mode, or start from one of four presets.
sidebar:
  label: Drawer design
  icon: palette
---

The **Design** tab controls how the drawer looks. Layout, text and behavior live on the **Layout** tab. See [Cart drawer settings](/guides/cart-drawer).

## Where to find it

In wp-admin, go to **WooCommerce** > **CartPops** > **Drawer**, then open the **Design** tab. A live preview of the drawer stays beside the settings. Click **Save Changes** when you are happy with the result.

## Start from a preset

Under **Presets**, choose **Default**, **Minimal**, **Bold** or **Ocean**. A preset sets seven colors at once: **Primary**, **Primary Text**, **Background**, **Text**, **Border**, **Button Background** and **Button Text**. It leaves your other colors alone.

A preset applies as a single change, so one undo (Cmd/Ctrl+Z) takes it back. The preset button stays highlighted only while those seven colors still match it exactly.

## Colors

Under **Colors**, every color has its own picker. They are grouped here by what they affect:

- **Brand and surfaces**: **Primary**, **Primary Text**, **Background**, **Surface**, **Border**.
- **Text**: **Text**, **Text Secondary**, **Text Tertiary**.
- **Form fields**: **Input Background**, **Input Border**, **Input Text**.
- **Buttons**: **Button Background**, **Button Text**, **Secondary Button Background**, **Secondary Button Text**.
- **Quantity selector**: **Quantity Button Background**, **Quantity Button Text**, **Quantity Value Background**, **Quantity Border**, **Quantity Value Text**.
- **Recommendations**: **Recommendations Button**, **Recommendations Button Icon**, **Recommendations Background**, **Recommendations Border**, **Recommendations Text**.
- **Status**: **Sale Price**, **Success**, **Danger**.

## Dark mode

Set **Dark Mode** under **Shape**:

- **Auto (follow system)** switches the drawer to dark when the shopper's device is set to dark mode.
- **Always light** and **Always dark** ignore the device setting.

The **Dark mode palette** section sets the colors used in dark mode: **Background**, **Surface**, **Text**, **Text Secondary**, **Border**, **Input Background** and **Input Border**. Your **Primary** brand color is shared with the light palette.

## Overlay and shape

- **Background Overlay** sets the **Color** and **Opacity** (0 to 100) of the dim layer behind the drawer.
- **Border Radius** (0 to 32) rounds the drawer elements.
- **Button Border Radius** (0 to 32) rounds the buttons.

## Go further with CSS

For changes the settings don't cover, add your own rules in **Advanced** > **General** > **Custom CSS**. See [Advanced settings](/guides/advanced-settings). All CartPops elements use the `.cpops-` class prefix.

Developers: the [CSS customization reference](/developers/css-customization) lists the stable class names and custom properties.