Live Storefront Pricing Schema

Overview

Live Storefront Pricing lets Hype replace price elements in your storefront HTML so customers always see live discounted values. It works by embedding JavaScript that reads a JSON schema you configure in Settings → Live Storefront Pricing.

The schema tells Hype:

• Which template (all, collection, or product) the rule applies to
• Which elements on the page represent prices
• What HTML structure to replace them with
• Where to insert dynamic values ({{ price }}, {{ discountedPrice }}, {{ discountPercentage }}, {{ discountAmount}})

---

Schema structure

Key	Required	Description
template	Yes	"all", "collection", or "product" — determines where the rule applies
type	Yes	"product-card" or "product-page"
parentSelector	For product-card	Must include product link element for handle extraction
selector	Yes	Must capture the entire price container, including regular, compare-at, and sale prices
wrapperSelector	Optional	Scope queries when multiple matches or Shadow DOM elements exist
replaceContent	Yes	Exact original HTML structure with {{price}} , {{discountedPrice}}, {{ discountPercentage }}, {{ discountAmount}} variables substituted. You can also restyle this to your liking

---

Example schema

[
  {
    "template": "all",
    "type": "product-card",
    "parentSelector": ".product-card-wrapper",
    "selector": ".card > .card__content > .card__information > .card-information > .price ",
    "replaceContent": "<div class='price price--on-sale'><div class='price__container'><div class='price__regular'><span class='visually-hidden visually-hidden--inline'>Regular price</span><span class='price-item price-item--regular'>{{ price }}</span></div><div class='price__sale'><span class='visually-hidden visually-hidden--inline'>Regular price</span><span><s class='price-item price-item--regular'>{{price}}</s></span><span class='visually-hidden visually-hidden--inline'>Sale price</span><span class='price-item price-item--sale price-item--last'>{{ discountedPrice }}</span></div><small class='unit-price caption hidden'><span class='visually-hidden'>Unit price</span><span class='price-item price-item--last'><span></span><span aria-hidden='true'>/</span><span class='visually-hidden'>&nbsp;per&nbsp;</span><span></span></span></small> </div> </div>"
  },
  {
    "template": "all",
    "type": "product-page",
    "selector": ".product__info-container .price ",
    "replaceContent": "<div class='price price--on-sale'><div class='price__container'><div class='price__regular'><span class='visually-hidden visually-hidden--inline'>Regular price</span><span class='price-item price-item--regular'> {{price}}</span></div><div class='price__sale'><span class='visually-hidden visually-hidden--inline'>Regular price</span><span><s class='price-item price-item--regular'>{{price}}</s></span><span class='visually-hidden visually-hidden--inline'>Sale price</span><span class='price-item price-item--sale price-item--last'>{{discountedPrice}}</span></div><small class='unit-price caption hidden'><span class='visually-hidden'>Unit price</span><span class='price-item price-item--last'><span></span><span aria-hidden='true'>/</span><span class='visually-hidden'>&nbsp;per&nbsp;</span><span></span></span></small></div></div>"
  }
]

How Hype applies these rules

Internally, Hype uses a deep query selector that searches through the DOM (including shadow roots):

1. If wrapperSelector is set → find wrapper first, then search inside it.
2. Else if parentSelector is set → search inside the parent.
3. Else → run query directly with selector.

---

Testing your schema

Use the Test Live Pricing button in settings:

1. Click Test Live Pricing
2. Enter a discount value (e.g., 100)
3. Click Preview theme
4. Your site opens with the schema applied — all products show prices with the discount injected

This lets you quickly validate that selectors and replacements work as intended before going live.

---

Best practices

• Always capture the entire price container to avoid broken markup
• Copy original HTML exactly into replaceContent — only swap price values
• Preserve all attributes, IDs, and classes (data-price-wrapper, data-product-price, etc.)
• Test across product and collection templates