One collection. One retailer cart.

The MARKERS panel builds a semantic bill of materials. The host retailer maps those parts to its own sellable SKUs and performs the cart action on its own origin. No payment information or customer identity crosses the iframe.

Shopify

  1. Agree stand supply/fulfillment. Create or import the stand into the retailer catalog. This is not activated by the ZIP.
  2. Copy assets/olo-retailer-adapter.js and the supplied section/template into an unpublished duplicate theme.
  3. Map each offered ink/tip, handle and Connector Ring pack to this store's product handle and variant ID. The current stand variant is supplied by Liquid automatically.
  4. Enable “mapped marker + stand checkout” only after mapping and testing. Available items proceed independently; unavailable or unmapped lines remain visible, excluded from checkout and the subtotal. The host refreshes stock immediately before adding. A stock race or network failure may still require checking the cart before retrying.
  5. Test duplicate colors, brush/chisel pairs, handles on A/B, ZERO, rings, quantities, mixed-stock and all-sold-out selections. Confirm separate line items and exact totals. Verify referral attribution with the merchant. Do not place paid test orders without authorization.

Restock reminders, not paid backorders

The out-of-stock line shows a backorder notice and a “Notify me when back in stock” link to the exact retailer product/variant. The customer must complete the retailer’s native restock form; the experience never claims an alert was submitted, never charges for unavailable lines, and never overrides stock policies. Install and verify a native restock widget on each retailer product page. A mapping can optionally include notifyUrl for its native restock entry point; the bridge accepts only links on that retailer’s origin. No separate notification service is bundled. OLO’s existing native Notify me email form was verified on its Orange brush half-marker page. Unmapped products never fall back to foreign-store SKU IDs.

{
  "brush:G1.5": {"handle": "your-brush-product", "variant": "YOUR_VARIANT_ID"},
  "chisel:Y1.4": {"handle": "your-chisel-product", "variant": "YOUR_VARIANT_ID"},
  "brush:ZERO": {"handle": "your-zero-product", "variant": "YOUR_VARIANT_ID"},
  "handle:red": {"handle": "your-handle-product", "variant": "YOUR_VARIANT_ID"},
  "connector:black10": {"handle": "your-ring-10-pack", "variant": "YOUR_VARIANT_ID"},
  "refill:brush:G1.5": {"handle": "your-brush-refill", "variant": "YOUR_VARIANT_ID"},
  "kit:YOUR_CATALOG_KEY": {"handle": "your-set-product", "variant": "YOUR_VARIANT_ID"}
}

Placeholders are intentionally invalid. Include every variant you offer, including refill and set keys shown by the studio catalog. A single-color selection is exactly one half-marker; it does not add another color, a handle or rings. A two-color marker contains two half-marker SKUs; a handled marker contains one half-marker plus a handle. Each assembled pair/handle needs one ring. The product workspace does not silently add rings: shoppers add Connector Ring 10-packs explicitly. Identical variant quantities merge, but the customer’s saved marker combinations remain intact in My markers.

The adapter refreshes prices/availability from the retailer's product JSON and uses a single locale-aware cart/add.js request. Final Shopify stock/pricing rules apply. The cart button adds items; it never places an order. A “Review your cart” link appears after success. Use the olo:cart-added host event to refresh your theme cart drawer if required.

Other retailer websites

Use the same OLOMerchant.connect adapter with host-owned getCatalog and addItems functions. The catalog returns semantic keys mapped to local SKU IDs, integer prices in minor currency units, availability, and titles. The merchant owns the backend cart API and inventory. The supplied Shopify implementation is not a BLICK or Michaels integration.

OLOMerchant.connect({
  frame: document.querySelector('#olo-experience'),
  name: 'Your store', currency: 'USD',
  getCatalog: async () => yourVerifiedCatalog,
  addItems: async (localItems) => yourCartAPI.add(localItems)
});

The generic adapter accepts opaque alphanumeric SKU IDs, including dashes, dots, underscores and colons. The Shopify mapping requires numeric variant IDs. Do not put private API keys in the page. Keep the iframe origin/source checks, per-session token, and duplicate-request guard. Configure the exact Sites origin in your content-security-policy frame-src.

Referral and order handling

Shopify cart lines carry private _olo_experience and _olo_referral=exolox properties for merchant-side reconciliation. These are not proof of affiliate commission credit. OLO must confirm attribution and any commission arrangement. Collective and retailer order forwarding are separate commercial setup steps.

Stand product installation