Widgets

Shopify integration.

A theme app extension — no theme code edits, no layout shift, clean uninstall.

In development — not yet available. The Buyary Shopify app is not published to the Shopify App Store and cannot be installed today. This page describes the integration as it is being built, so you can review the approach ahead of time. To be told when it opens, request access. The embed SDK is the supported path on any storefront in the meantime.

Buyary will ship as a Shopify app with a theme app extension — the integration path Shopify requires for theme-integrating apps (ScriptTag is legacy). Merchants never touch theme code, widgets are positioned by dragging in the theme editor, and uninstalling removes every trace automatically.

What the merchant will do

  1. Install the Buyary app from the Shopify App Store and paste the public shop token from the Buyary dashboard. (The app is not listed yet.)
  2. Theme editor → App embeds → toggle on Buyary. This loads the SDK site-wide from Shopify’s CDN, deferred.
  3. On the product template: Add block → Apps → Buyary Trust Widget, pick the widget (Score, Consensus, Quotes, Who It’s For, Claims, Tradeoffs, Comparison, Ask Ari, or Generative), and drag it into position — typically under price or add-to-cart.

What you should see: the widget renders immediately in the theme editor preview — with no token it uses Buyary’s published demo catalog, so the install is verifiable before provisioning.

How the block identifies the product

The app block passes every identifier Liquid knows, and matching runs on Buyary’s side down a ladder — strongest signal first, fuzzy title-matching last and gated on confidence:

blocks/trust-widget.liquid
<buyary-widget
  type="{{ block.settings.widget_type }}"
  product="{{ product.title | escape }}"
  brand="{{ product.vendor | escape }}"
  data-shop="{{ shop.permanent_domain }}"
  data-product-id="{{ product.id }}"
  data-barcode="{{ variant.barcode | escape }}"
  data-sku="{{ variant.sku | escape }}"
  data-buyary-id="{{ product.metafields.buyary.product_id }}"
  {{ block.shopify_attributes }}>
</buyary-widget>
  1. Explicit mapping — the buyary.product_id metafield, written when the merchant confirms a match in the app. Always wins.
  2. GTIN / barcode — the industry-standard cross-merchant join.
  3. SKU + vendor, then title + URL — last resorts, confidence-gated.

Performance posture

Built for Shopify measures a PDP-heavy Lighthouse impact and p75 Web Vitals; the extension is designed against those gates: block JS served from Shopify’s CDN with only data fetched from Buyary, reserved heights so CLS stays 0, IntersectionObserver hydration, a single dependency-free file, and one CDN-cached JSON lookup per product.

Files

extensions/buyary-trust-widgets/
shopify.extension.toml
assets/buyary.js            # the embed SDK, vendored
blocks/buyary-embed.liquid  # app embed: SDK + shop token, site-wide
blocks/trust-widget.liquid  # app block: nine widgets, one type setting
locales/en.default.json

Structured data: the extension never injects aggregateRating from Buyary’s cross-web analysis — Google prohibits aggregated third-party ratings in markup, and Shopify themes already emit Product JSON-LD. An opt-in critic-style Review by Buyary is the defensible alternative where rich results matter.

Headless storefront (Hydrogen, custom React)? Skip the extension and use the embed SDK directly — same element, same attributes.