Offer block styling recipes

Copy-paste CSS for the looks merchants ask for most, plus the attributes and placement hooks a theme developer needs. Paste these into your theme stylesheet, or into the offer's Custom CSS box scoped to that offer's class.

An offer block has no card of its own by default: transparent background, no border, no shadow, no padding, and every size in em, so it reads as part of the product form it sits in. The first recipe puts a card back around it.

Card

body {  --hype-card-bg: #ffffff;  --hype-card-border: #ebeae7;  --hype-card-padding: 22px;  --hype-card-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 16px 40px -24px rgba(17, 17, 17, 0.18);}

Dark card

Set the paper and the ink; the neutrals, tints and borders follow, because they are mixed from those two colors.

.product__info-wrapper {  --hype-card-bg: #1b1b1a;  --hype-card-border: #2e2e2c;  --hype-card-padding: 22px;  --hype-text: #f4f3f0;  --hype-heading: #ffffff;  --hype-thumb-bg: #26262a;  --hype-thumb-border: #34343a;  --hype-cta-bg: #f4f3f0;  --hype-cta-color: #161616;  --hype-cta-shadow: none;  --hype-card-shadow: none;}

Editorial

Square corners, a serif title, tracked uppercase buttons.

body {  --hype-card-bg: #fbf8f2;  --hype-card-border: #e3dccd;  --hype-card-padding: 22px;  --hype-card-radius: 4px;  --hype-tile-radius: 2px;  --hype-control-radius: 2px;  --hype-badge-radius: 2px;  --hype-thumb-radius: 2px;  --hype-cta-radius: 2px;  --hype-cta-transform: uppercase;  --hype-cta-tracking: 0.08em;  --hype-cta-font-size: 13px;  --hype-eyebrow-tracking: 0.16em;  --hype-font-heading: Georgia, serif;  --hype-title-weight: 500;  --hype-title-size: 22px;  --hype-card-shadow: none;}

Soft

Rounder everything, a borderless card, a tinted sum line.

body {  --hype-card-radius: 26px;  --hype-tile-radius: 18px;  --hype-control-radius: 12px;  --hype-thumb-radius: 16px;  --hype-cta-radius: 999px;  --hype-card-bg: #ffffff;  --hype-card-padding: 26px;  --hype-card-shadow: 0 20px 50px -24px rgba(17, 17, 17, 0.25);  --hype-strip-bg: var(--hype-ac-05);}hype-fixed-bundle-showcase::part(strip),hype-bought-together::part(strip) {  border-top: none;  border-radius: var(--hype-tile-radius);  padding: 12px 14px;}

Matching your theme's buttons

Point the block at the font variables and button shape your theme already uses, and drop the accent glow so the button reads flat like the theme's own.

body {  --hype-font: var(--font-body-family);  --hype-font-heading: var(--font-heading-family);  --hype-cta-shadow: none;  --hype-cta-shadow-hover: none;  --hype-cta-radius: var(--buttons-radius, 0px);  --hype-cta-height: 46px;  --hype-cta-weight: 500;}

--font-body-family and --font-heading-family are Dawn's names. Use whatever your theme declares; if your theme has no such variable, name the family directly.

Hiding elements

Any exposed part can be hidden. Do this rather than deleting copy in the admin when the element is redundant in your layout.

/* Drop the eyebrow above the title */hype-volume-tiles::part(eyebrow) { display: none; }/* Drop the fine print under the button */hype-fixed-bundle-showcase::part(footnote) { display: none; }/* Drop the savings badges but keep the prices */hype-bought-together::part(badge) { display: none; }

Only parts can be hidden this way. The block's other internals are inside a shadow root and cannot be selected from page CSS.

Block attributes

Attribute	Values	Effect
`accent`	A hex color	The one color everything tints from. Set from the customizer's Color
`cta`	`button` (default), `none`	`none` removes the block's own add-to-cart button, leaving a chooser the theme's button adds
`cta-state`	`idle`, `busy`, `added`, `error`	Written by the cart wiring while an add is in flight; drives the button's feedback

Attributes are useful as selectors:

hype-volume-tiles[cta='none']::part(card) { padding-bottom: 0; }

The block's classes

Every mounted block carries hype-block plus a class unique to the offer: hype-bundle-<id> for bundles and hype-offer-<id> for discount offers. The id exists only after the offer's first save, so the class appears from then on. The offer's Advanced section shows the exact class.

.hype-bundle-abc123 {  --hype-cta-radius: 999px;}.hype-bundle-abc123::part(title) {  text-transform: uppercase;}

Placement hooks

Mount into an element of your choosing. An offer whose placement is set to an anchor mounts into the Hype: Placement anchor theme app block, or into any element carrying data-hype-anchor="<name>", where the name matches the Anchor name field in the admin. That is how a bundle builder gets a page of its own:

<div data-hype-anchor="Bundle builder"></div>

If the anchor is not on the page, the block falls back to automatic placement.

Choose which button adds. Bundle and volume offers have an Add to cart button setting in their Blocks step. Blocks mount above the product form by default.

Setting	What happens
The block's and the theme's buttons (default)	Both buttons stay
Only the block's button	The product form's submit and dynamic checkout buttons are hidden once the block has mounted, and re-hidden after every theme re-render
Only the theme's button	The block mounts with `cta="none"` and shows its chooser or tiers without a button. The product form's submit is caught ahead of the theme's own handlers and the block adds its selection through the same wiring its own button uses; the theme's button is disabled while the add is in flight. With nothing chosen, or with "just this item" chosen, the block declines and the theme's ordinary add runs. The theme button's label is not changed