Design

Making the drawer look like it came with your theme, and what stays fixed.

Design settings are store-wide and on every plan, including the free one. A drawer that looks like a demo of an app is a poor advertisement for the app, so nothing about making it yours is held back.

Find them under Design in the app. Changes show in the preview beside the controls as you make them, and the preview mounts the same renderer your storefront runs.

Start from a look

Four starting points sit above everything else: Clean, Soft, Bold and Sharp.

Applying one fills in every control below. It does not lock anything or put you in a mode — change whatever you like afterward, and Discard puts it back. There is no “which look am I using” state to get stuck in, because none is stored.

Style

The two most structural choices, which is why they come first: everything else paints onto what you pick here.

The shell — three layouts:

Header — a titled bar with a card count and arrows. The default.
Minimal — a grab handle and the cards, nothing else.
Floating — a compact panel that does not cover the page. The other two are modals: they dim the background and hold focus while open, which is right for a deliberate interruption. Floating is the one that leaves your store usable underneath.

The button — six styles: outline, solid, elevated, counter, icon and tab. Solid is the one that puts your accent color on the button itself.

If you choose the icon style, give the button an accessible label. It is the one style with no visible text, so its name has to come from somewhere.

Brand

Colors. Surface, text, accent and border. Three more are calculated from those rather than exposed as controls:

Muted text, from your text color.
The text on your accent — black or white, whichever is readable against the accent you chose. Set a dark accent and the button text turns white on its own.
The focus ring, derived from your accent and forced to stay visible against your surface.

Those three are computed rather than stored, which is the point: there is no combination of settings that produces unreadable button text or an invisible focus ring, because those are not settings.

Contrast is checked as you pick colors and warns below 4.5:1. It is a warning, never a block — it is your storefront and your brand.

Typography. The drawer inherits your theme’s font by default, which is most of why it reads as part of your store. What you control is a single size multiplier and the heading and body weights.

One multiplier rather than per-element sizes, deliberately: three sizes derived from one number keep the hierarchy intact at every setting. Separate controls would let body text end up larger than headings.

No webfont is ever loaded. Not by default, not as an option.

Effects. Drawer and card shadow, how dark the background dims behind a modal layout, and how fast the drawer opens. Motion can be set to zero. The drawer also honors a shopper’s own reduced-motion setting regardless of what you choose.

Shape

Corner radius for the drawer, the cards and the button, plus border width and the spacing values — drawer padding, card padding, the gap between cards, and the button’s own padding.

Every value is clamped to a range that still looks like the product. You cannot set a radius that turns cards into circles or a gap that hides the next card, because the peek of the next card is what tells a shopper the drawer scrolls.

Placement

Where the button sits, and what it sits above.

Position — nine anchors around the edge of the viewport, with fine offsets. Desktop and mobile are set separately, so a button that sits bottom-center on a desktop can move out of the way of a phone’s own bottom bar.

Layering is the setting that solves the most common problem with any fixed-position widget: it lands on top of your chat bubble, or underneath it. The choices are named for what they do rather than by number — the default, below most things, above a chat widget, or above everything.

Both are on every plan. A collision with another app is not something you should have to pay to fix.

Advanced

Custom CSS, on paid plans, and last on the page on purpose — you should meet every supported control before the unsupported one.

Every color, size and spacing value the drawer uses is published as a --pd-* custom property. Overriding those is safe across updates. Targeting our internal class names is not — they are private, they change between releases, and CSS that depends on them will break without warning.

Your CSS applies inside the drawer only. It cannot reach the rest of your theme, and your theme cannot reach into it. There is a size cap, because it is sent with every page view.

Giving one drawer its own look

Everything above sets the store’s design. Every drawer inherits it, which is what keeps a store with several drawers looking like one store.

On paid plans a drawer can override the store’s design by section — take the store’s colors but its own shape, for instance. A drawer that overrides nothing shows you what it currently looks like rather than a set of empty controls, so the inherit-or-override switch tells you the current answer as well as changing it.

What you cannot change, and why

Card size is fixed at 264 by 208 pixels, and each card type’s internal layout is fixed with it. That single geometry is why eleven different card types read as one product rather than as eleven widgets. Making it adjustable would mean eleven layouts that each break at a different size.

The carousel behaves the way it behaves — that is behavior, not style.

The focus ring is always visible. Its color is yours; its presence is not.

Having trouble making it fit? Troubleshooting covers the drawer colliding with a chat widget and why your storefront can look slightly different from the preview.