Cart drawer parts and recipes

When a --hype-cd-* variable does not reach far enough, style the drawer's named internals with ::part(). Parts apply from the page's own stylesheet and always beat the drawer's internal styles, including the values a merchant set in the Design panel.

hype-cart-drawer::part(checkout) { border-radius: 999px; }hype-cart-drawer::part(item-thumb) { object-fit: contain; }hype-cart-drawer[template='noir']::part(apply) { background: #fff; color: #000; }

Every part is addressed on hype-cart-drawer, whichever section draws it.

::part() reference

What has no part

A few internals are not exposed and cannot be selected from page CSS: the empty-cart message, the Continue shopping button, the cart total drawn inside the checkout button, and the icon inside a trust badge. Style the trust icon with --hype-cd-trust-icon and --hype-cd-trust-icon-size instead; for the others, use the drawer's type and color variables.

Trust strip and payment marks

Trust badges — up to five, each picking an icon from one drawn family: globe, star, shield, truck, lock, refresh, leaf, heart, box, clock, medal, check, card, chat, gift. Labels are copy and are translatable per badge. The strip spreads its badges evenly and wraps when the labels need it.

Payment logos are their own section, so they can be placed, ordered and switched off independently of the checkout button. Pick up to eight in the editor's logo picker, in the order they render: Visa, Mastercard, American Express, Discover, Diners Club, JCB, Maestro, UnionPay, Apple Pay, Google Pay, PayPal, Klarna, Amazon Pay, iDEAL, Bancontact, TWINT, Alipay, WeChat Pay, Shop Pay, Affirm, Afterpay, RuPay, BHIM UPI, Google Pay (UPI), Paytm, PhonePe. The artwork is inline SVG, so it costs no request. Each logo draws its own card, which is why the wrapper adds no frame by default.

Recipes

Paste into the Advanced panel's Custom CSS, or into a theme stylesheet.

Brand font without touching the selects

hype-cart-drawer {  --hype-font: 'Brand Sans', sans-serif;  --hype-cd-font-heading: 'Brand Serif', serif;}

Everything square, no shadows

hype-cart-drawer {  --hype-cd-panel-radius: 0px;  --hype-cd-card-radius: 0px;  --hype-cd-control-radius: 0px;  --hype-cd-thumb-radius: 0px;  --hype-cd-badge-radius: 0px;  --hype-cd-pill-radius: 0px;  --hype-cd-cta-shadow: none;  --hype-cd-cta-shadow-hover: none;}

Products shot on white: show the whole image, not a crop

hype-cart-drawer {  --hype-cd-thumb-fit: contain;  --hype-cd-thumb-padding: 4px;  --hype-cd-thumb-bg: #fff;}

Solid Apply button, matching checkout

hype-cart-drawer {  --hype-cd-secondary-bg: var(--hype-cd-cta-bg);  --hype-cd-secondary-color: var(--hype-cd-cta-color);  --hype-cd-secondary-border: transparent;}

Quieter drawer: no hairlines, tighter rows

hype-cart-drawer {  --hype-cd-divider: none;  --hype-cd-row-gap: 12px;}

Bigger payment logos with a hairline frame

hype-cart-drawer {  --hype-cd-mark-height: 26px;  --hype-cd-mark-border: var(--hype-cd-border);  --hype-cd-mark-radius: 3px;}

One template only — the template attribute is on the host:

hype-cart-drawer[template='atelier'] {  --hype-cd-panel-texture-opacity: 0;}

A pill checkout button, overriding a merchant's radius — the Design panel's radius is inline on the host, so a variable will not beat it; a part will:

hype-cart-drawer::part(checkout) { border-radius: 999px; }

Rules that keep custom CSS working

• Never set --hype-ac by hand. The tint scale is computed in JavaScript from the accent color; a manual --hype-ac leaves every tint stale. Change the accent in the Design panel, or override the specific --hype-cd-* that draws the element you mean.
• Set --hype-cd-*, not the section's own class. Sections render inside a shadow root, so ordinary descendant selectors from your stylesheet match nothing. Custom properties inherit across that boundary; class names do not.
• Merchant Design-panel values win over inherited ones. They are written inline on the host. Use ::part() when you need to override one.
• Ids and variable names are permanent once shipped. Hype Cart Drawer adds them, and never renames them, precisely because merchants' custom CSS refers to them.
• A part not listed above is unreachable, even if you can see the element in the inspector. Ask support for a new part rather than depending on internal structure.

Related

• Cart drawer CSS variables
• Custom CSS and custom JavaScript
• Styling storefront components