Volume selector element

<hype-volume-selector> renders a Volume Discount campaign as an interactive tier picker on the product page. The shopper chooses a tier, picks a variant for each item in it, and adds the whole tier to the cart in one action. It can add to the cart with its own button, or take over the theme's Add to cart button.

Placement

The theme editor block is Hype: Volume Selector. Place it inside the product form, near the Add to cart button. Two behaviors depend on that: the element finds the theme's submit button by walking up to the closest <form>, and it keeps itself in sync with the theme's quantity input.

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

Attributes

override-add-to-cart is detected by presence, not by value. override-add-to-cart="false" still turns the override on — remove the attribute instead.

Standalone mode

This is the default. The element renders its own button, exposed as the custom-add-to-cart part, with the label Add to Cart. The button is disabled until the shopper selects a tier. Clicking it adds every item in the selected tier and dispatches hype:item-added-to-cart on document.

Use this when your theme's own button should keep working normally for single-unit purchases, or when the element sits outside the product form.

Overriding the theme's Add to cart button

Add override-add-to-cart and the element stops rendering its own button. Instead it attaches a click handler to the theme's button. When a tier is selected the handler cancels the theme's submit and adds the tier's items; when no tier is selected the theme's button behaves exactly as it did before.

<hype-volume-selector  identifier="YOUR_APP_BLOCK_ID"  override-add-to-cart="true"  add-to-cart-selector=".product-form__submit"></hype-volume-selector>

The element looks for the button in this order and stops at the first hit:

1. add-to-cart-selector, matched against the whole document.
2. The first button[type="submit"] inside the closest ancestor <form>.
3. The first button[type="submit"] inside the element's parent element.
4. The button[type="submit"] whose center is closest to the element on screen.

If your theme's Add to cart control is an <input type="submit">, an <a>, or a <button> with no type="submit", only step 1 can find it — pass add-to-cart-selector explicitly.

Quantity input

On load the element looks for the first input[name="quantity"] in the document and keeps it in step with the tier selection:

• Selecting a tier writes that tier's item count into the input and dispatches an input event, so the theme picks up the change.
• Changing the input selects the tier whose quantity band contains the new value, and adds or removes variant rows until the count matches.

Tiers with an amount-based condition rather than a quantity-based one are not auto-selected from the quantity input.

CSS custom properties

--font-size and --max-width are the two variables on this element that take a plain number. --font-size: 12px will break the layout; write --font-size: 12. Everything inside the element is sized in em, so changing that one number scales the whole block proportionally.

Parts

Layout

Tier

Variant selection and add to cart

When the shop configures an option as a swatch, that option renders as swatches instead of a <select>, and variant-select is not present for it.

Styling example

<style>  #hype-volume {    --primary-color: #1f2937;    --secondary-color: #ffffff;    --font-size: 12;    --max-width: 100;    --font-weight: 600;  }  #hype-volume::part(tier-container) {    border-radius: 10px;  }  #hype-volume::part(popular-badge) {    text-transform: uppercase;    letter-spacing: 0.05em;  }  #hype-volume::part(original-price) {    opacity: 0.55;  }  #hype-volume::part(custom-add-to-cart) {    border-radius: 999px;    text-transform: uppercase;  }</style>

Related

• Volume table element
• Campaign elements overview
• Volume discount selector