# Match the cart to your brand colors

> Set every color the cart uses, from buttons and the reward bar to text and the page dimming behind the drawer.

Source: https://help.attravo.com/drawer-cart/articles/match-the-drawer-to-your-brand
Updated: 2026-10-06

The cart looks like part of your store when it uses your colors. Every color it paints is a setting under **Colors**, in three groups, and the preview updates as you type.

## Set your brand colors

1. On **Cart settings**, open **Colors**.
2. Under **Brand**, set **Accent**, the color of titles, prices and buttons. Select the swatch to pick a color, or type a hex code.
3. Set the others in the group if you want them to differ from the accent:
   - **Buttons** and **Button text**: the checkout and **Apply** buttons. Blank follows the accent.
   - **Apply button** and **Apply button text**: the discount code button only.
   - **Reward**: the progress bar and gift accents.
   - **Announcement**: the announcement bar.
   - **Depth**: button shadow, badges and hover states.

![The Brand colors](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/6e0999c8-ff71-451c-8d4a-827bb772b773/colors-1-brand-9fd10403cc.webp#w=1172&h=948)

## Set the surfaces

Under **Surfaces**:

- **Background**: the drawer panel and cards.
- **Cart page sections**: the reward bar, offers box and summary cards on the full cart page.
- **Drawer reward bar**, **Drawer offer feed** and **Drawer totals**: tints for those parts of the drawer only. Blank sits on the panel.
- **Border**, **Chip background** and **Progress track**.
- **Overlay**: dims the page behind the drawer.

![The Surfaces colors](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/6e0999c8-ff71-451c-8d4a-827bb772b773/colors-2-surfaces-6ba42c7254.webp#w=1172&h=1132)

## Set the text colors

Under **Text**, set **Heading text**, **Muted text** for tax and shipping notes, **Text on buttons**, **Text on announcement**, the countdown bar's colors, **Text on reward markers**, **Sale price** for the struck-through price, and **Free gift**.

![The Text colors](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/6e0999c8-ff71-451c-8d4a-827bb772b773/colors-3-text-b09f42ad6f.webp#w=1172&h=1036)

Keep text readable against the color it sits on, such as **Text on buttons** against **Accent**.

## See it change

![Changing the Accent color and watching the preview follow](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/6e0999c8-ff71-451c-8d4a-827bb772b773/preview-3-live-update-580d08c48f.mp4#w=1996&h=1616)

Select **Save** when you are happy. For fonts, corners and sizes, see [Set fonts, corners and sizes](https://help.attravo.com/drawer-cart/articles/set-fonts-corners-and-sizes.md).