Choosing a design

Hype Cart Drawer ships three templates — Bold, Noir and Atelier. You pick one on the Choose a design page when you create a cart, and you can switch at any time from the Design panel in the editor. A template sets the drawer's colors, corner radius, fonts and starting width in one move.

The three templates

Bold — "Clean and versatile. Follows your theme's font." A white panel, near-black text and buttons, 14px corners. This is the default and the safest starting point: it takes its typeface from your storefront, so it inherits your brand's type without any setup.

Noir — "Dark surfaces, light buttons, soft contrast." A near-black panel (#0f0f11) with warm off-white text and a light button, 14px corners, set in a modern sans.

Atelier — "Bone paper, green ink and hairline rules." A bone-colored panel (#f4f1ea) with deep green ink and a fine 2px radius, set in a classic serif with editorial serif headings, and slightly wider by default (440px instead of 420px).

Template color

Under the template cards on Choose a design there is a row of color swatches: Ink, Cobalt, Teal, Amber, Berry and Violet, plus the template's own color where it isn't already one of those (labelled Template color).

Picking a swatch repaints the accent and the checkout button, so one click recolors the whole drawer. Leave it on Template color to keep the template exactly as the card shows it. You can set a separate button color afterwards in Design → Fine-tune colors.

Switching template later

1. Open the cart from the home page.
2. Expand the Design panel.
3. Click another template card.

The editor warns you: "Switching template replaces your colors and font with the template's own. Discard to undo."

That is literal. Switching replaces the design tokens rather than merging them, and it also resets the body and heading fonts, any custom or Google font family you typed, and the drawer width — to the new template's values. Anything outside the design (your modules, their text, behavior settings, activation, translations) is untouched.

If you switch by accident, click Discard in the save bar before saving and your previous design comes back.

Fine-tuning after a template

The Design panel's Fine-tune colors and Size & shape groups let you override the template's choices one at a time:

• Color — the accent, as a Theme swatch or a Custom color.
• Card background, Border, Text, Title, Button background, Button text.
• Corner radius, Spacing, Title size, in pixels.

Every module in the drawer reads the same values, so a single change carries through the announcement bar, the progress bar, the product rows and the footer together. No module carries a hardcoded color.

Accent tints are mixed toward the card background rather than toward white, which is why a tinted panel on Noir stays dark instead of becoming a white island.

What the templates do not change

Templates are a starting point for appearance only. They do not add, remove or reorder modules, and they never change how the drawer behaves. A cart built on Atelier opens, intercepts and checks out exactly like one built on Bold.

For CSS-level control beyond these fields — custom properties, ::part() hooks and custom CSS — see Styling Hype's storefront components.

Related

• The editor
• Fonts
• Drawer width and panel style