Skip to main content
One script tag turns any element on your page into a Hemsy launcher. This is the install path when you own the storefront code: Hydrogen and other headless Shopify setups, custom frontends, or landing pages outside your theme.
On a standard Shopify Online Store theme, the theme app extension places this same script for you from the theme editor — no code. Use this page when that isn’t an option.

​
Install

Any element matching data-hemsy-selector becomes a launcher. With no extra attributes, clicking it opens Sandbox mode: the full interactive experience, starting blank. What each launcher opens, and what its final CTA does, is controlled by launcher attributes. Use a shared class selector like .hemsy-launcher when multiple elements should open Hemsy. Avoid reusing the same id on multiple elements.
Launchers are bound when the script loads. Elements added to the page later (for example by client-side rendering after load) will not automatically become launchers. Use the JavaScript API for dynamic elements. One exception: the script re-scans for launchers on Shopify’s shopify:section:load event, so theme editor re-renders keep working.

​
Script attributes

Event callbacks (onItemAdded, onItemRemoved, onProductVariantData) are configured on window.HemsyEmbedConfig, not as data attributes. See Checkout vs Cart. On headless storefronts, onProductVariantData is how returned items reach your cart.

​
Rules worth knowing up front

  • Instant mode and the final action are per launcher: set data-hemsy-mode="instant" or data-hemsy-action on a launcher element to affect just that button. The same attributes on the script tag act as page-wide defaults. Instant and Share launchers coexist fine on the same page.
  • Prefer data-hemsy-action for checkout vs cart. The legacy script-level data-hemsy-mode="cart" still works for backward compatibility, but data-hemsy-mode should be reserved for "instant".
  • data-hemsy-trigger has no launcher semantics of its own. It’s the conventional selector hook (data-hemsy-selector="[data-hemsy-trigger]"), which is what the Shopify theme extension uses by default.