Display product info

The show-* displayers render one product field each. They must sit inside a <storesynk-product>; outside it they render nothing, silently.

<storesynk-product handle="example-product">
  <show-vendor class="vendor"></show-vendor>
  <h1><show-title></show-title></h1>

  <div class="price-row">
    <show-price></show-price>
    <show-compare-price></show-compare-price>
  </div>

  <p class="variant-meta">
    SKU: <show-sku></show-sku> ·
    In stock: <show-stock></show-stock>
  </p>

  <show-description></show-description>

  <p class="product-type">Category: <show-product-type></show-product-type></p>

  <show-data query="priceRange.maxVariantPrice" money hide-when-zero class="price-cap"></show-data>
</storesynk-product>

• show-price, show-compare-price, show-sku, and show-stock read the selected variant, so they update when the shopper changes an option. show-compare-price hides itself when the variant is not discounted.
• Prices always go through a displayer. Never hardcode a price string; the engine formats it with the shop’s money format and the buyer’s market.
• show-description renders the product’s HTML description. show-data reaches any other field by dot-path.

Options

These attributes are shared by every show-* product displayer:

Attribute	Default	What it does
query	(the tag’s built-in path)	Override the dot-path into the product data. Required on show-data.
money	false	Format the value through the shop’s money format.
html	false	Write the value as HTML instead of text.
variant	false	Resolve the path from the selected variant instead of the product root.
hide-when-zero	(absent)	Treat a numeric or amount value of 0 as empty.

Styling

When a value is empty, the engine sets hidden plus ss-empty on the displayer.

show-price { font-size: 24px; font-weight: 600; }
show-compare-price { color: #999; text-decoration: line-through; }
/* Hide a labeled row entirely when its value is empty. */
.variant-meta:has(show-sku[ss-empty]) { display: none; }

Gotchas

• One blank displayer while the rest works means it sits outside its <storesynk-product>. See nothing renders.
• Raw data instead of a formatted amount means a missing money attribute. A show-data with no query renders nothing. See money and formatting.
• Variant fields that never move on selection mean the option picker is not wired. See options and variants.

Related

• Product displayers reference
• Sale badge
• Metafields