> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hemsy.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify Theme Extension

> Install Hemsy on a Shopify storefront from the theme editor: an app embed for the script and a trigger block for launch buttons. No code.

The Hemsy Shopify app includes a theme app extension, so everything on the other embed pages (the script tag, launcher attributes, checkout vs cart) is configured from the Shopify theme editor instead of your theme code. Your theme files are never edited, and uninstalling the app removes everything.

The extension has two parts:

| Part                          | What it is                                                                          | Where it lives                                |
| ----------------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------- |
| **Hemsy Embed** (app embed)   | Loads the embed script with your store slug and the page-wide checkout/cart default | Theme editor → **App embeds**, once per theme |
| **Hemsy Trigger** (app block) | A styleable button or link that opens Hemsy, one per placement                      | Any section, typically product pages          |

<Note>
  Your Hemsy dashboard's **Embed** page has one-click deep links that open the
  theme editor with each part pre-selected, plus your store slug ready to copy.
</Note>

## 1. Enable the app embed

1. In the Shopify admin, go to **Online Store → Themes → Customize**, then open **App embeds** (the puzzle-piece icon).
2. Toggle on **Hemsy Embed**.
3. Paste your **Hemsy store slug** (copy it from the dashboard's Embed page).
4. Choose what happens **when shoppers finish**:
   * **Open Hemsy checkout** (default): Hemsy opens Shopify checkout directly.
   * **Add items to the store cart**: Hemsy adds the shopper's items straight into your store's cart using the [native cart strategy](/embeds/checkout-vs-cart#native-cart-strategy). No callback code is involved.
5. Save.

The embed alone doesn't render anything. It binds any element matching `[data-hemsy-trigger]` as a launcher, which is exactly what the trigger block emits.

## 2. Add trigger blocks

Add the **Hemsy Trigger** block to any section from the theme editor (product templates are the usual spot). Each block is its own launcher with its own settings:

| Setting                                  | What it does                                                                                                                                                       |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Opens**                                | The [launch mode](/embeds/launch-modes) for this button: Designer (blank canvas), this product page's item, a bundle of products, a shared look, or a guided flow. |
| **Bundle products**                      | For bundle triggers: pick products in the editor and Hemsy builds the payload for you.                                                                             |
| **Share ID / Flow ID**                   | For shared-look and guided-flow triggers. Copy the IDs from the Hemsy dashboard.                                                                                   |
| **Instant mode + Model ID**              | Skips model selection and generates immediately with the given model. See [Instant](/embeds/launch-modes#instant).                                                 |
| **When shoppers finish**                 | Inherit the app embed's checkout/cart setting, or override it for this button.                                                                                     |
| **Display style, label, colors, sizing** | Button or link, full width, background/text/border colors, radius, padding, font size.                                                                             |

Because instant mode and the finish action are per-launcher, you can freely mix triggers on one page: an instant "See it on a model" button next to a shared-look button next to a plain designer link.

## Custom placements

If you want to launch Hemsy from an element the trigger block can't reach (a nav link, a custom section), give that element the `data-hemsy-trigger` attribute plus any [launcher attributes](/embeds/launch-modes#launcher-attributes):

```html theme={null}
<a href="#" data-hemsy-trigger data-hemsy-flow="YOUR_FLOW_ID">Build a bed</a>
```

The app embed's script binds it automatically, including elements re-rendered by the theme editor, which the script rebinds on `shopify:section:load`.

## Headless or custom storefront?

The theme extension requires an Online Store theme. If your storefront is headless (Hydrogen or a custom frontend), use the [script install](/embeds/script) instead — same script, same attributes, and your code owns the cart handoff via [event callbacks](/embeds/checkout-vs-cart#event-callbacks). Everything else in these docs applies equally to both install paths.