Volume table element

Updated Sep 18, 20263 min read

<hype-volume-table> renders a Volume Discount campaign as a plain two-column table: one row per tier, with the condition on the left and the saving on the right. It is display only. Unlike the volume selector, it has no radio buttons, no variant pickers and no Add to cart button, and it never touches the product form.

Use it when you want shoppers to see the "buy more, save more" ladder without changing how they add products to the cart.

Placement

The theme editor block is Hype: Volume Table. Because it does not interact with the product form, you can place the tag anywhere on the product page — under the description, in a tab, in a sidebar.

<hype-volume-table  id="hype-volume-table"  identifier="YOUR_APP_BLOCK_ID"  {% if request.design_mode %}design-mode="true"{% endif %}></hype-volume-table>

Attributes

Attribute	Required	Default	Description
`identifier`	Yes	`""`	The campaign block's App block ID
`design-mode`	No	`false`	`true` renders placeholder rows for styling in the theme editor

The header title, the header icon, and the text in every row come from the block's settings in the Hype admin. Each tier is stored as two strings, so a row reads exactly what the merchant typed — for example "Buy 2" and "Save 10%".

The element renders an empty container when the campaign is not active for the current product.

CSS custom properties

Property	Default	Applies to
`--primary-color`	`#000`	Header row background and every table border
`--secondary-color`	`#fff`	Header row text and icon
`--font-weight`	`bold`	Header cell text
`--border-radius`	`8px`	Outer container corners

Two more variables are accepted by the theme block but are not used by the element's own styles:

--font-size — the table inherits its font size from the surrounding theme instead. Set the size on the element itself (#hype-volume-table { font-size: 14px }) or through ::part(table).
--max-width — the container is a fixed 300px wide. Override it through ::part(container).

Parts

Part	Element
`container`	Outer wrapper
`table`	The `<table>`
`table-head`	The `<thead>`
`header-row`	The header `<tr>`
`header`	The header `<th>`, which spans both columns
`header-content`	The icon and title inside the header
`badge-icon`	The header icon
`table-body`	The `<tbody>`
`tier-row`	Every body `<tr>`
`tier-row-<index>`	One body row, zero-based
`eligibility-cell`	The left `<td>`
`discount-cell`	The right `<td>`

Each body row carries both tier-row and its indexed part, so ::part(tier-row-1) styles the second row on its own while ::part(tier-row) still styles them all.

Styling example

<style>  #hype-volume-table {    --primary-color: #1e293b;    --secondary-color: #f8fafc;    --border-radius: 12px;    --font-weight: 600;    font-size: 14px;  }  /* The container is 300px by default. */  #hype-volume-table::part(container) {    width: 100%;    max-width: 420px;  }  #hype-volume-table::part(header) {    padding: 12px;    text-transform: uppercase;    letter-spacing: 0.05em;  }  #hype-volume-table::part(eligibility-cell) {    text-align: left;    padding-inline-start: 16px;  }  #hype-volume-table::part(discount-cell) {    text-align: right;    padding-inline-end: 16px;    font-weight: 700;  }  /* Highlight the best tier. */  #hype-volume-table::part(tier-row-2) {    background: #f0fdf4;  }</style>

Both columns are 50% wide and every cell has 8px of padding by default. The table uses border-collapse: collapse, so a border you add through ::part(tier-row) merges with the existing cell borders rather than doubling them.

Was this article helpful?

Still stuck?

Ask a follow-up and we'll see it came from “Volume table element”.

Opens chat with your question and a link to this article.