Drawer width and panel style

Two settings in the editor's General panel decide the drawer's shape on desktop: Drawer width in pixels, and Panel style, which is either Flush or Floating. On phones both are ignored — the drawer is always full screen.

Drawer width

Drawer width accepts 280 to 720 pixels. Type a value outside that range and it is clamped when you leave the field.

The default is 420px on the Bold and Noir templates, and 440px on Atelier. Switching template replaces the width with that template's own value, so set the width after you have settled on a template.

What the number changes:

Under about 360px the drawer feels cramped: long product titles wrap several times, and a footer with protection, a discount field, a summary, a button and payment logos runs out of room.
420 to 480px suits most stores. Product rows read comfortably and the footer stays calm.
Above about 560px the drawer starts to cover a large part of a laptop screen, which works against the point of a drawer — the shopper should still feel they are on your store.

Go wide if your product rows carry a lot of information — long variant names, bundle components nested under a parent line. Stay narrow if the drawer is mostly a list and a button.

Panel style

Panel style — "Phones are always full screen."

Flush (the default) docks the drawer against the edge of the screen, full height, with square outer corners.

Floating insets the drawer from the edge on all sides and rounds its corners with the drawer's own Corner radius, so it reads as a card lifted off the page.

Which to pick is a taste question, with one practical note: Floating shows a strip of your storefront down the side of the panel, so it works best against a calm page and with a template whose background contrasts with your theme. On a busy page, Flush is the quieter choice.

Both styles dock on the right, and both mirror to the left on right-to-left storefronts.

Phones

At 640 pixels wide and below, the drawer is full width and full height with no corner radius, whatever Drawer width and Panel style say. The footer also tightens: it is capped at 44% of the screen height there (50% on larger screens) so the product list always keeps room.

To check this, resize your browser window — the editor preview follows the same rules as the storefront, so a narrow preview shows the phone composition.

Corner radius

Corner radius is not on this panel. It is a design token, set in Design → Size & shape, and it is what Floating rounds the panel with. Atelier seeds a 2px radius and Bold and Noir seed 14px. See Choosing a design.

Going further

Width, panel inset and every other measurement in the drawer are CSS custom properties, so a theme developer can override them — including per breakpoint — with Custom CSS in the Advanced panel. See Cart drawer CSS variables.