Offer block ::part() hooks
Updated Sep 10, 20264 min read
When a --hype-* variable does not reach far enough, style the block's named internals with ::part(). Parts are applied from the page's own stylesheet and always beat the block's internal rules — including the values a merchant set in the design customizer, which are written inline on the element and would otherwise win.
hype-fixed-bundle-showcase::part(cta) { text-transform: uppercase; letter-spacing: 0.06em;}hype-volume-tiles::part(option-selected) { outline: 2px dashed hotpink;}hype-bought-together::part(row) { padding-block: 16px;}Part names are permanent once shipped: Hype Bundles adds parts, it never renames them.
Parts most blocks expose
| Part | Element |
|---|---|
card | The card frame |
head | The header row |
eyebrow | The micro-caps line above the title, and section labels |
title | The block title |
cta | The primary button |
cta-wrap | The stack holding the CTA, its error line and its footnote |
footnote | Fine print under the CTA |
badge | Accent badges: Save $X, Most popular, count pills |
thumb | Product thumbnails, including builder picture tiles |
strip | The sum line: total row, summary row |
strip-label | The label inside the sum line |
amounts | A "was + now" pair, in rows and in the sum line |
was | A struck-through compare-at price |
now | The current price |
savings | "You save $X" copy |
option | A selectable row or tile |
option-selected | Added alongside option while that option is selected |
option-title | The label inside a selectable tile |
option-note | The sub-copy inside a selectable tile |
radio | The drawn radio control |
checkbox | The drawn checkbox control |
rows | A ruled list |
row | One row in a ruled list |
row-title | The title inside a list row |
row-price | The price inside a list row |
row-note | The sub-copy inside a list row |
variant-select | The per-row variant dropdown |
variant-chip | The read-only variant chip, where the row has no dropdown |
Not every block draws every one of these — a block with no list has no row, a block with no compare-at price has no was. An unmatched ::part() rule is simply inert.
/* Turn every price row into a wider, quieter line */hype-fixed-bundle-lineup::part(row) { padding-block: 18px; }hype-fixed-bundle-lineup::part(row-price) { opacity: 0.7; }The "just this item / the deal" chooser
The fixed bundle showcase, the fixed bundle lineup, bought-together and add-ons draw a two-option chooser above the button.
| Part | Element |
|---|---|
choice | The chooser (a radio group) |
choice-option | Each of its two options; also carries option, and option-selected while selected |
option-body | The body of an option that lists what it contains |
hype-bought-together::part(choice-option) { padding-block: 16px;}Block-specific parts
| Block | Extra parts |
|---|---|
hype-fixed-bundle-showcase | rating, lineup |
hype-volume-tiles | grid, save-badge |
hype-bxgy-ladder | gift-banner |
hype-quick-pick | progress, progress-label, slots, slot, slot-filled, categories, category, category-open, category-head, category-title, marker, pick-button |
hype-bundle-stepper | steps, step, step-done, step-active, step-todo, step-row, step-heading, grid, qty-badge, add-badge |
hype-bundle-accordion | category, category-open, category-head, category-title, marker, grid, qty-badge |
hype-bundle-options-modal | option-pill, secondary (the Back button) |
hype-discount-code-modal | field, shelf, code-row, code, use-code |
hype-quick-pick and hype-bundle-accordion share the category vocabulary: category is one collapsible group, category-open is added while it is open, and marker is the chevron.
/* Progress bar and filled slots in the quick-pick builder */hype-quick-pick::part(progress) { height: 6px; }hype-quick-pick::part(slot-filled) { border-style: solid; }/* A builder's step chips */hype-bundle-stepper::part(step-done) { opacity: 0.5; }hype-bundle-stepper::part(step-active) { font-weight: 700; }/* The discount code modal's field and code rows */hype-discount-code-modal::part(field) { border-width: 2px; }hype-discount-code-modal::part(code) { font-family: ui-monospace, monospace; }What ::part() cannot reach
The modals draw their panel with an inner hype-v2-modal element that lives inside the modal's own shadow root. Its parts (backdrop, panel, header, heading, close, body, footer) are not forwarded, so page CSS cannot select them. Style the panel with --hype-modal-width, --hype-modal-bg, --hype-modal-radius, --hype-modal-padding, --hype-modal-shadow and --hype-backdrop instead. The modal's own parts in the table above (field, option-pill, cta, secondary, …) are exposed directly and work as normal.
Everything else inside a block that has no part is internal, and a future release may change it. If you find yourself wanting a part that does not exist, ask support rather than reaching for a structural workaround.
Related
Was this article helpful?
Related articles
Still need help?
Start a chat and we'll pick it up right here.