Documentation

Shopify

Track e-commerce visitors and conversions from AI traffic

Loamly helps you understand how AI recommendations drive e-commerce sales. This guide shows you how to add Loamly to your Shopify store.

Add the tracking script

Method 1: Theme settings (recommended)

  1. Go to your Shopify admin → Online Store → Themes
  2. Click Customize on your current theme
  3. Click Theme settings (gear icon) in the left sidebar
  4. Scroll down to Custom code or Additional scripts
  5. Find the Head section and add:
<script
  src="https://app.loamly.ai/t.js?d=yourstore.myshopify.com"
  defer
></script>

Method 2: Edit theme code

  1. Go to Online Store → Themes
  2. Click the ... menu → Edit code
  3. Open theme.liquid in the Layout folder
  4. Find the closing </head> tag
  5. Paste the script just before it
  6. Click Save

Custom domain

If you use a custom domain (store.yourbrand.com), use that in the script instead of the myshopify.com domain.

Verify installation

  1. Visit your Shopify store in a new incognito window
  2. Browse a few products
  3. Check your Loamly dashboard for the visits
  4. Verify that page views are being tracked correctly

Track purchases

To track completed purchases, add tracking code to your checkout success page:

  1. Go to Settings → Checkout
  2. Scroll to Order status page → Additional scripts
  3. Add the following code:
{% if first_time_accessed %}
<script>
if (window.loamly) {
  window.loamly.event('purchase', {
    order_id: '{{ order.order_number }}',
    total: {{ total_price | money_without_currency | remove: ',' }},
    currency: '{{ currency }}',
    items_count: {{ line_items.size }}
  });
}
</script>
{% endif %}

Revenue attribution

With purchase tracking enabled, you can see exactly which AI platforms are driving revenue, not just traffic.

Track cart events

For deeper e-commerce insights, you can track add-to-cart events. Add this to your theme's JavaScript:

// Add to your theme.js or a custom JS file
document.addEventListener('click', function(e) {
  const addToCartButton = e.target.closest('[data-add-to-cart]');
  if (addToCartButton && window.loamly) {
    const form = addToCartButton.closest('form');
    const productTitle = form?.querySelector('[name="product-title"]')?.value 
      || document.querySelector('.product-title')?.textContent;
    
    window.loamly.event('add_to_cart', {
      product: productTitle,
      page: window.location.pathname
    });
  }
});

Note: The exact selectors may vary depending on your theme. Adjust the selectors to match your theme's HTML structure.