Volume Table Element

Overview

The <hype-volume-table> is a simple web component that renders a non-interactive table of your "Volume Discount" tiers. It serves as a clear visual guide on product pages, showing customers the savings they can get by purchasing larger quantities.

Unlike the <hype-volume-selector>, this component is for display purposes only and does not interact with the product form.

Usage

For prerequisites and common setup instructions, please see the UI Elements Overview.

Place the element on your product page:

<hype-volume-table identifier="YOUR_BLOCK_ID"></hype-volume-table>

Attributes

Attribute	Required	Description	Default
identifier	Yes	A unique string that links the element to its configuration in the Hype admin.
design-mode	No	Set to true to display the component with placeholder data for styling in the Shopify Theme Editor.	false

Styling with CSS Custom Properties

Customize the table's appearance using these CSS variables.

Property	Description	Default
--primary-color	The background color of the table header and the color of the table border.	#000
--secondary-color	The text color of the table header.	#fff
--font-size	The base font size for the table content.	10px
--max-width	The maximum width of the component as a percentage.	100%
--font-weight	The font weight for the table header text.	bold
--border-radius	The border radius for the main table container.	8px

Advanced Styling with Shadow Parts

For more granular control, you can directly style internal elements of the component using the ::part() CSS pseudo-element. This allows you to target specific pieces of the component's Shadow DOM.

Example

/* Add a border to the table */
#my-volume-table::part(table) {
	border-style: dashed;
}

/* Style the discount cells */
#my-volume-table::part(discount-cell) {
	font-weight: bold;
	color: green;
}

/* Style a specific row (e.g., the second row) */
#my-volume-table::part(tier-row-1) {
	background-color: #f0f0f0;
}

Available Parts

Part Name	Element Description
container	The main wrapper for the entire component.
table	The <table> element.
table-head	The <thead> element.
header-row	The <tr> element in the table header.
header	The <th> element that contains the header content.
header-content	The <div> inside the header that wraps the icon and title.
badge-icon	The icon displayed in the header.
table-body	The <tbody> element containing the tier rows.
tier-row	Applied to each <tr> in the table body.
tier-row-${index}	A dynamic part for each tier row, where index is the zero-based row number.
eligibility-cell	The <td> for the tier eligibility text (e.g., "Buy 2").
discount-cell	The <td> for the tier discount text (e.g., "Save 10%").