Shopify

Add elNudge to your Shopify store — either via the App Store (recommended) or by pasting the script tag directly into your theme.

elNudge works with all Shopify themes, including Online Store 2.0 and legacy themes. There are two install paths: the Shopify App Store (recommended) and a manual script tag. Both paths require a few extra lines in your theme to fire cart and purchase events accurately.

Path A — Shopify App Store (recommended)

1. Install from the App Store

Search for elNudge in the Shopify App Store and click Add app. Follow the OAuth flow to connect your store.

The app automatically injects the <script> tag via Shopify's ScriptTag API — you do not need to edit your theme files for the base install. Your site key is provisioned and embedded for you.

2. Wire up cart events in theme.liquid

Shopify's ScriptTag injection loads elNudge on every storefront page, but cart interactions happen inside your theme's JavaScript. You need to call window.__eln('track', ...) after the relevant cart actions.

Open Online Store → Themes → Edit code and locate your theme's add-to-cart handler. A typical location is assets/theme.js or sections/product-form.liquid.

After a successful cart/add.js AJAX call, fire:

// After Shopify cart/add.js resolves
fetch('/cart/add.js', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: variantId, quantity: qty }),
})
  .then((res) => res.json())
  .then((item) => {
    if (window.__eln) {
      window.__eln('track', 'CART_ADD', {
        product_id: String(item.product_id),
        product_name: item.product_title,
        variant: item.variant_title,
        price: (item.price / 100).toFixed(2),
        currency: Shopify.currency.active,
        quantity: item.quantity,
      });
    }
  });

For cart removals (e.g., after cart/change.js with quantity: 0):

// After Shopify cart/change.js resolves
fetch('/cart.js')
  .then((res) => res.json())
  .then((cart) => {
    if (window.__eln) {
      window.__eln('track', 'CART_REMOVE', {
        product_name: removedItemTitle,  // capture before the update
        price: (removedItemPrice / 100).toFixed(2),
        cart_total_after: (cart.total_price / 100).toFixed(2),
      });
    }
  });

3. Fire the PURCHASE event in order-status.liquid

Purchase confirmation fires on Shopify's order status page, which is a separate template. Open Online Store → Themes → Edit code → Templates → order-status.liquid (or checkout.liquid on older plans) and add the following at the bottom:

{% if first_time_accessed %}
<script>
  window.__eln = window.__eln || function() { (window.__eln.q = window.__eln.q || []).push(arguments); };
  window.__eln('track', 'PURCHASE', {
    order_value: '{{ checkout.total_price | money_without_currency }}',
    currency: '{{ checkout.currency }}',
    item_count: {{ checkout.line_items | size }},
  });
</script>
{% endif %}

The first_time_accessed check prevents duplicate events if the customer refreshes the confirmation page.

Path B — Manual script tag

If you prefer to manage the script yourself, or you are not using the App Store:

1. Add the snippet to theme.liquid

Open Online Store → Themes → Edit code → Layout → theme.liquid and paste the following inside <head>, as early as possible:

<script>
  (function(w,d,s,k){
    w.__eln=w.__eln||function(){(w.__eln.q=w.__eln.q||[]).push(arguments)};
    var t=d.createElement(s);t.async=1;
    t.src='https://cdn.elnudge.com/v1/sdk.js';
    t.setAttribute('data-site-key',k);
    d.head.appendChild(t);
  })(window,document,'script','sk_live_YOUR_SITE_KEY');
</script>

Replace sk_live_YOUR_SITE_KEY with the key from app.elnudge.com → your site → Install.

Use sk_test_XXXXXXXX on your staging or development theme so test traffic does not affect production analytics.

2. Wire cart and purchase events

Follow the same steps as Path A — add the CART_ADD / CART_REMOVE calls to your cart handler JS and add the PURCHASE block to order-status.liquid.

Passing product context (both paths)

For the most accurate AI responses, you can surface current product data to elNudge on product pages. Add the following to your product template (sections/main-product.liquid or similar):

<script>
  window.__elnProductContext = {
    product_id: '{{ product.id }}',
    product_name: {{ product.title | json }},
    price: '{{ product.selected_or_first_available_variant.price | money_without_currency }}',
    currency: '{{ shop.currency }}',
    available: {{ product.available | json }},
  };
</script>

elNudge reads window.__elnProductContext automatically — no additional track call is needed.

Quiet zones

Shopify injects the script on all storefront pages. To suppress nudges on pages like /account, /policies/*, or your blog:

Option 1 — script attribute (manual install only):

<script
  src="https://cdn.elnudge.com/v1/sdk.js"
  data-site-key="sk_live_YOUR_SITE_KEY"
  data-quiet-zones="/account,/account/*,/blogs/*,/pages/privacy,/pages/terms"
  async
></script>

Option 2 — dashboard: Navigate to app.elnudge.com → your site → Engagement Rules → Quiet Zones and add the path patterns there. Dashboard settings take precedence over the attribute.

Verify it is working

Open your storefront in a browser with the console visible.
Run:
```
typeof window.__eln === 'function'
```
This should return true.
Add an item to your cart and check the console for an elNudge CART_ADD log (enable debug mode by adding data-debug="true" to the script tag temporarily).
Complete a test order (use Shopify's Bogus Gateway) and verify the PURCHASE event fires on the order status page.
In the app.elnudge.com dashboard, your site's Live view should show the session within a few seconds of loading the storefront.