# Layouts & appearance

Source: https://salesdrawer.com/docs/layouts-and-appearance/

> List, grid and compact layouts, the 15 color controls, radius and spacing, seasonal presets and custom CSS.

Sale Drawer’s styles are fully self-contained, so it looks the same under any theme or page builder — Gutenberg, Elementor, Divi, WPBakery and the rest. Everything below is in the free version.

## List, grid and compact layouts

- **List** — image beside the details, with the original price, sale price and savings. The best default for most stores.
- **Grid** — two-up cards with larger images. Great for visual products such as fashion and home goods.
- **Compact** — tight single-line rows: name and prices only. Ideal for large catalogs and for phones.

## The 15 color controls

Colors are grouped by area — header, body, product cards, prices, savings badge, buttons and launcher — so you can match your brand without touching CSS. Every color has a sensible default, and a **Reset** link restores it. Check contrast when you change text or button colors so prices stay easy to read.

## Radius, spacing and shadow

Adjust corner radius, card spacing and drawer shadow to match your theme: square and flat for minimalist themes, rounded and soft for friendlier brands.

## Seasonal presets and custom CSS

Presets apply a complete color scheme in one click — useful for Black Friday, holiday or summer sales — and you can tweak any color afterwards. For anything else, add **custom CSS**; it is loaded only where the drawer is, and all drawer classes are prefixed so your rules won’t leak into the rest of the site.