Metafields

show-metafield renders one merchant-defined metafield by type: scalars as text, rich text as HTML, links onto a nested <a>, money and measurements formatted, files as an image, video, or download link.

<storesynk-product handle="example-product">
  <metafield-wrapper class="metafield-row">
    <strong>Care:</strong> <show-metafield key="care"></show-metafield>
  </metafield-wrapper>

  <show-metafield key="details" namespace="specs" class="metafield-rich"></show-metafield>

  <show-metafield key="features" class="feature-list">
    <metafield-item class="feature"></metafield-item>
  </show-metafield>
</storesynk-product>

• metafield-wrapper hides the whole label-plus-value block when no metafield inside it resolves. A bare show-metafield hides only itself and leaves the label behind.
• For a list.* metafield, nest exactly one metafield-item. The engine clones it once per value.
• In JSX, write field= instead of key=. React swallows a key prop, so @storesynk/next and any React code must use the field alias.

Options

Attribute	Default	What it does
key	""	The metafield key. Required unless field is given.
field	""	Alias for key; wins when both are set. Use it in React and JSX.
namespace	"custom"	The metafield namespace.

metafield-wrapper and metafield-item take no attributes.

Styling

Both the displayer and the wrapper set ss-empty when there is nothing to show.

show-metafield[ss-empty], metafield-wrapper[ss-empty] { display: none; }
.feature-list { display: flex; flex-direction: column; gap: 4px; }

Gotchas

• A value that never shows means the key and namespace pair does not exactly match a metafield on the product. See metafields.
• A list.* metafield rendering one value or nothing is missing its metafield-item template.
• On server-rendered pages, money, file_reference, and every list.* type stay blank in the built HTML and fill after adoption. See SSR.

Related

• Metafields reference
• Display product info