Make Shopify Product Facts Available Without Hidden Interactions

The rendering problem

A shopper may click a “Tech specs” tab. A retrieval client may receive only the tab button while JavaScript fetches the facts later. 200 is not enough if the returned HTML lacks the product evidence.

Gymshark exposed useful fit and size facts visibly, but our initial JSON-LD response contained no detected Product entity. MyFonts exposed licensing details without an initial Product entity. These pages show why visible HTML and machine semantics must be inspected separately.

Server-versus-rendered audit

curl -sSL https://example.com/products/item -o server.html
rg -ni 'specifications|ingredients|compatibility|size|warranty' server.html

In DevTools, inspect the same facts after opening every accordion. If they exist only after a network request, record that dependency.

Implementation rule

Render important content in the original HTML and use JavaScript only to change presentation.

<section aria-labelledby="specs-title">
  <h2 id="specs-title">Specifications</h2>
  <details>
    <summary>View technical specifications</summary>
    <dl>
      <dt>Wi-Fi</dt><dd>2.4 GHz</dd>
      <dt>Power</dt><dd>Rechargeable battery</dd>
    </dl>
  </details>
</section>

details content remains in the document even when collapsed.

Variant facts

Initial HTML should describe the initial selected variant. Variant JavaScript must update visible price, SKU, availability, and option label from one controlled payload.

Failure modes

• specification image without text alternative
• content injected only after click
• mobile CSS uses display:none for critical policy facts
• variant UI updates price but not availability text
• app failure leaves an empty placeholder

Acceptance criteria

Direct HTML contains product identity and decisive shared facts; selected variant state is coherent; keyboard and mobile users can reveal optional detail; failure of an enhancement script does not erase the evidence.