Skip to content
Shadegap

For stores & brands

Add “Find my shade” to any product page

One line of code adds a shade-finder button to your store. Shoppers take a selfie, YouCam AI measures their skin tone, and SHADEGAP hands the best shade back to your page: it selects that shade in your variant picker and fires an event your site can use.

See it on a demo store →Build your snippet
  1. 1

    Paste one line

    A <script> tag on your product page. Works with Shopify, WooCommerce, or hand-made HTML.

  2. 2

    Shopper taps the button

    A pop-up opens: selfie or upload, consent, about 15 seconds. Sample faces work without a photo.

  3. 3

    YouCam AI measures

    Skin Tone Analysis reads the skin colour; CIEDE2000 finds the closest shade; Makeup VTO shows it on them.

  4. 4

    Your page gets the shade

    The matching variant is selected and a shadegap:shade event fires. The photo never reaches your site.

Build your snippet

1 · Script (recommended): button + result handed back

2 · Or an inline iframe (no script allowed on your site)

Live preview

This is the real widget, loaded from the snippet on the left. Try it with a sample face.

Northfield Skin Proof Foundation · $38

Events from the widget show up here.

Options

Widget attributes
data-rangeWhich range to match against: a demo id or the share code from your SHADEGAP report.
data-labelButton text. Default “Find my shade”.
data-colorButton colour (hex).
data-langen, es, fr, pt, hi or ja. Default: the shopper's browser language.
data-targetCSS selector to place the button in. Default: where the script tag is.
data-select“off” to stop it selecting your variant automatically.
data-callbackName of a global function to call with the result.

JavaScript: ShadeGap.open() opens the finder from your own button; ShadeGap.last holds the latest result.

Using the result

window.addEventListener("shadegap:shade", (e) => {
  const r = e.detail;
  // r.shade      { id, name, hex }        best shade in your range
  // r.status     "match" | "near" | "gap"
  // r.deltaE     CIEDE2000 colour difference (≤ 3 = good match)
  // r.words      "good match", "slightly off"…
  // r.skin       { hex, description }     e.g. "medium, golden"
  // r.alternatives  next 3 closest shades
  // r.selectedElement  the variant it selected on your page (or null)
  analytics.track("shade_found", { shade: r.shade.name, status: r.status });
});
  • Private by design: the photo goes from the shopper's browser to YouCam for measuring only. Your page receives the shade and match quality, never the image.
  • Safe messaging: results are posted only to the page that embedded the finder, and the widget accepts messages only from SHADEGAP.
  • Accessible: keyboard and screen-reader friendly dialog, Esc to close, focus returns to your page, 6 languages.
  • Isolated: button and pop-up live in a shadow DOM, so your CSS and ours never clash.