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

# Install Shopify Generic Embed

> Add Trylora directly to Shopify theme code and connect your Google Analytics 4 property.

export const PersonalizedEmbedScript = () => {
  const [storeKey, setStoreKey] = useState("");
  useEffect(() => {
    const queryStoreKey = new URLSearchParams(window.location.search).get("storeKey")?.trim() ?? "";
    setStoreKey((/^[a-zA-Z0-9_-]{8,128}$/).test(queryStoreKey) ? queryStoreKey : "");
  }, []);
  const displayedStoreKey = storeKey || "your_store_key";
  const embedScript = `<script async src="https://cdn.trylora.app/embed.js" data-store-key="${displayedStoreKey}"></script>`;
  return <>
      {storeKey ? <Note>Your personalized Store Key is already included. Copy the script exactly as shown.</Note> : <Warning>
          This link does not contain a valid Store Key. Ask Trylora for your personalized installation link before publishing the script.
        </Warning>}
      <CodeBlock language="html" filename="theme.liquid">
        {embedScript}
      </CodeBlock>
    </>;
};

Shopify Generic Embed adds Trylora directly to your theme. Trylora prepares the storefront configuration and sends you a personalized installation link containing your public Store Key.

You do not need a Trylora dashboard account.

## Before you start

You need:

* A personalized installation link supplied by Trylora
* Shopify permission to edit theme code
* The name of the theme you want to update
* One product URL for verification
* Access to the GA4 property used by the store

## Copy your personalized script

<PersonalizedEmbedScript />

The Store Key selects your Trylora configuration. It is a public identifier, not a password or secret credential. Keep it unchanged so the storefront loads the correct configuration.

## Add the script to Shopify

<Steps>
  <Step title="Open the theme code editor">
    In Shopify admin, open **Online Store → Themes**. Find the theme you want to update, select **…**, and select **Edit code**.
  </Step>

  <Step title="Open the shared layout">
    Under **Layout**, open `theme.liquid`.
  </Step>

  <Step title="Paste the script once">
    Find the closing `</body>` tag. Paste your personalized Trylora script immediately before it. Ensure that the theme contains only one `cdn.trylora.app/embed.js` script.
  </Step>

  <Step title="Save the theme">
    Select **Save**. If you edited an unpublished theme, preview that theme when you verify the installation.
  </Step>
</Steps>

## Verify the installation

1. Open a product page from the updated theme.
2. If Trylora supplied a private-testing query, add it to the product URL. For example, use `?trylora=1` when the URL has no query string, or `&trylora=1` when it already has one.
3. Confirm that one Try On Button appears in the intended location.
4. Open Trylora and complete one new try-on.
5. Send Trylora the tested product URL if the installation needs final review.

<Note>
  A private-testing query works only when Trylora has enabled the matching Page Targeting Rule for your store. The script alone does not create that rule.
</Note>

## Connect Google Analytics

Follow [Connect your Shopify GA4 property](/shopify/analytics) to create the two values Trylora needs to send try-on events to your existing GA4 property:

* The web stream's Measurement ID
* A Measurement Protocol API secret from the same web stream

The guide also explains the separate property ID and Analyst-access steps used when Trylora prepares reports.

## Troubleshooting

### The button does not appear

* Confirm that you edited the theme you are viewing.
* Confirm that the personalized Store Key was not changed.
* Confirm that the script appears once before `</body>` in the rendered page.
* Confirm that the page URL includes the private-testing query when your store requires one.
* Send Trylora the exact product URL so the Store URL, targeting rules, and placement can be checked.

### Trylora appears twice

* Remove duplicate Generic Embed scripts.
* Remove any duplicate script injected by a tag manager or another theme snippet.

### A security policy blocks Trylora

The script must load from `https://cdn.trylora.app`. Review browser Content Security Policy errors and allow the Trylora origins and resource types reported for the installation.