Skip to content

Detail blocks

The lower half of the buy column — the information a shopper goes looking for after they’ve decided they’re interested.

One accordion row. Either the product’s own description or text you write, so the same block covers “Full description” and any bespoke panel beside it.

SettingTypeDefaultWhat it does
QuestionTextDetailsThe row’s summary label
Content sourceSelectdescriptiondescription uses the product description; custom uses the content setting
Custom textRich text(empty)The panel body when source is custom

It’s a native <details> element, so it opens and closes without any scripting, is keyboard-operable for free, and its content is findable by the browser’s in-page search even while collapsed.

Stack several. The block is designed to be added more than once — Details (from the description), Fit and sizing, Care, Shipping and returns. Consecutive rows collapse into a single flush-bordered list automatically; dropping any other block between two of them splits them into two groups, which is usually what you meant.

The block renders nothing when the body would be empty, so an unconfigured custom row doesn’t leave a bare label behind.

A specification table in an accordion row. One Label | Value pair per line, edited as plain text rather than as nested blocks.

SettingTypeDefaultWhat it does
QuestionTextSpecThe row’s summary label
RowsTextareaFour example rowsOne row per line, as Label | Value

The default content gives the shape:

Shell | Deadstock 3-layer technical
Lining | 210T taffeta, seam-sealed
Weight | 980g in size M
Made in | Osaka, Japan

Lines without a | are skipped silently, so a stray blank line or a note to yourself won’t render as a broken row. The output is a real <dl> with <dt>/<dd> pairs, which is the correct structure for a term-and-definition table.

Like the Details block, consecutive accordion rows join into one list — so a Details row followed by a Spec row reads as a single stack.

Share links plus a copy-link button. No settings.

It renders a dim “Share” label followed by X, Facebook and email links, then a Copy link button. The share URL is the product’s full absolute URL.

Copy uses the Clipboard API with a textarea-and-execCommand fallback for older browsers, and the button swaps its own label to a confirmation for 1.8 seconds before reverting — so the shopper gets feedback without a toast or a dialog.