Product price element

<hype-product-price> renders Hype's own price line on a product page: up to three parts drawn from the product's original price, its discounted price, and a message such as Save 20%. It sits beside your theme's price rather than replacing it. To rewrite the price your theme already prints, use live pricing instead.

Deprecated.<hype-product-price> will be removed in a future update. It keeps working where it is already placed, and with Enable debug logs on in the Hype: Discounts app embed it prints a deprecation warning to the console. Build new price displays on the live pricing schema instead.

Placement

The theme editor block is Hype: Product Price. In custom code, place the tag in your product template, usually next to the theme's price:

<hype-product-price  id="hype-price"  identifier="YOUR_APP_BLOCK_ID"  money-format="{{ shop.money_format | escape }}"  {% if request.design_mode %}design-mode="true"{% endif %}></hype-product-price>

The element only produces output when the page URL contains a product handle (/products/<handle>), and campaign prices only for Multi Products Discount and Order Discount campaigns. It re-checks itself when the URL changes without a reload, with a 100 ms debounce, so themes that swap products or variants in place keep showing the right price. A ?variant= parameter in the URL selects that variant's price; otherwise the first variant is used.

Attributes

Attribute	Required	Default	Description
`identifier`	Yes	`""`	The campaign block's App block ID
`money-format`	No	`""`	Your shop's money format, for example `${{amount}}`. Used only for the fallback prices described below; campaign prices are formatted by the SDK.
`design-mode`	No	`false`	`true` renders a sample line (`$10.00` struck through, `$8.00`, a `-20% OFF` badge) for styling in the theme editor

What it renders

The element runs in two stages.

Before a campaign matches, it shows the product's own prices from Shopify: the compare-at price struck through followed by the price, or the price alone when there is no compare-at price. These use money-format, so pass it when you place the element by hand.

When a campaign matches, the element replaces that with the three parts configured in the Hype admin as First block, Second block and Third block. Each part is one of:

Part	Admin setting	Renders
None	—	Nothing. The slot is skipped.
Original price	Show original price as strike off	The undiscounted price, struck through when the setting is on
Discounted price	—	The price after the campaign's discount
Custom price message	Show discount as badge	Your text, as plain text or as a badge

A campaign matches when one of its discount rules covers the product: a rule for all products that does not exclude this handle, or a rule that lists this handle. The first matching rule wins. When no rule matches, the fallback prices stay.

The message accepts five variables, written without spaces inside the braces:

Variable	Renders
`{{discount_code}}`	The campaign's discount code
`{{product_price}}`	The original price, formatted
`{{discounted_price}}`	The price after the discount, formatted
`{{discount_amount}}`	The discount as money, formatted
`{{discount_percentage}}`	The discount as a percentage, with the `%` sign included: `20%`. For amount discounts it is calculated from the product price and rounded to two decimals: `12.50%`.

An unknown variable is replaced by its bare name, so {{discount}} renders as discount. Prices are formatted in the shop's currency without market conversion, and decimals follow the Hide Decimals for Whole Numbers setting on the Hype: Discounts app embed.

CSS custom properties

Property	Default	Applies to
`--original-price-color`	`#999`	Original price text
`--original-price-size`	`14px`	Original price text
`--discounted-price-color`	`#000`	Discounted price text
`--discounted-price-size`	`16px`	Discounted price text
`--message-color`	`#fff`	Message text, plain or badge
`--message-size`	`14px`	Message text
`--message-badge-color`	`#000`	Badge background
`--message-badge-padding`	`4px`	Badge padding
`--message-badge-radius`	`20px`	Badge corners

Every price part is bold. A struck-through original price is also drawn at 60% opacity.

The element's own default for --message-color is white, chosen for the badge. The theme block overrides it with its Message → Text color setting (default #FA2C37), so when you place the element by hand and use a plain-text message, set --message-color yourself or the text disappears on a light background.

The theme block also writes --text-color and --text-size. The element does not read them; only the nine properties above have an effect.

Parts

Part	Element
`product-price-block`	Outer wrapper
`content-wrap`	Flex row holding the parts, 10px gap, vertically centered
`product-price`	The original price `<span>`
`discounted-price`	The discounted price `<span>`
`message`	The message, whether plain text or badge

The element reflects no state attributes. When it has nothing to show it renders nothing at all, so there is no empty box to hide.

Styling example

<style>  #hype-price {    --original-price-color: #6b7280;    --original-price-size: 14px;    --discounted-price-color: #111827;    --discounted-price-size: 20px;    --message-color: #ffffff;    --message-size: 12px;    --message-badge-color: #b91c1c;    --message-badge-padding: 4px 8px;    --message-badge-radius: 4px;  }  #hype-price::part(content-wrap) {    gap: 14px;  }  #hype-price::part(message) {    text-transform: uppercase;    letter-spacing: 0.04em;  }</style><hype-product-price  id="hype-price"  identifier="YOUR_APP_BLOCK_ID"  money-format="{{ shop.money_format | escape }}"></hype-product-price>

Reading its state from JavaScript

The element does not expose its controller. To react to the same data, construct your own ProductPriceController with the same identifier and subscribe to its config store; see UI SDK (window.HypeUI).