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

# Shopify (Manual)

> Add DATALYR tracking code manually to your Shopify theme

Add DATALYR tracking code directly to your Shopify theme for full control over event tracking.

## Use Cases

**Custom Event Tracking**
Track specific interactions like button clicks, video plays, or custom checkout steps.

**Headless Shopify**
Use with custom storefronts built on Hydrogen or other frameworks.

**Theme Customization**
Full control over when and how events are tracked. Customize for unique business needs.

**Development/Testing**
Test tracking in development environments before deploying to production.

## When to Use Manual Installation

**Use Manual Installation if:**

* You need full control over event tracking
* You have a highly customized theme
* You're using headless Shopify
* You want to track custom events beyond standard e-commerce

**Use App Installation if:**

* You want automatic order tracking
* You don't want to edit theme code
* You want one-click installation

[See app installation guide →](/getting-started/installation/platforms/shopify-app-store)

## Before You Start

* [ ] You have a DATALYR account
* [ ] You've created a workspace
* [ ] You have a Shopify store (any plan)
* [ ] You have access to edit your theme code

## Step 1: Get Your Tracking Code

1. Log in to your DATALYR dashboard
2. Go to **Settings → Tracking**
3. Copy your tracking script:

```html theme={null}
<script
  defer
  src="https://track.datalyr.com/dl.js"
  data-workspace-id="YOUR_WORKSPACE_ID">
</script>
```

## Step 2: Add to Your Shopify Theme

### Open Theme Editor

1. In your Shopify admin, go to **Online Store → Themes**
2. Find your current theme
3. Click **Actions → Edit code**

### Add to theme.liquid

1. In the left sidebar, find and click **theme.liquid** (under Layout)
2. Find the `</head>` closing tag
3. Paste your DATALYR tracking script **right before** `</head>`:

```liquid theme={null}
  <script
    defer
    src="https://track.datalyr.com/dl.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>
</head>
```

4. Click **Save**

## Step 3: Verify Tracking Works

1. Visit your Shopify storefront in a new browser tab
2. Browse a few products
3. Go to your DATALYR dashboard
4. Click **Events** in the sidebar
5. You should see `page_view` events within 10 seconds

If you see events, you're done!

## What Gets Tracked Automatically

Once installed, DATALYR automatically captures:

* Page views on all pages
* Visitor IDs (persistent across sessions)
* UTM parameters from ad campaigns
* Ad click IDs (fbclid, gclid, ttclid)
* Referrer and traffic source
* Device and browser information

## Track Shopify E-commerce Events

To track product views, add to cart, and purchases, add this code to your theme:

### Track Product Views

In **product.liquid** or your product template, add:

```liquid theme={null}
<script>
  if (window.datalyr) {
    datalyr.track('view_item', {
      product_id: '{{ product.id }}',
      product_name: '{{ product.title }}',
      product_price: {{ product.price | money_without_currency | remove: ',' }},
      currency: '{{ shop.currency }}',
      product_type: '{{ product.type }}',
      product_vendor: '{{ product.vendor }}'
    });
  }
</script>
```

### Track Add to Cart

In your theme, find where "Add to Cart" is handled. Add this to your cart AJAX callback or form submission:

```javascript theme={null}
if (window.datalyr) {
  datalyr.track('add_to_cart', {
    product_id: item.product_id,
    product_name: item.product_title,
    variant_id: item.variant_id,
    variant_name: item.variant_title,
    price: item.price / 100,
    quantity: item.quantity,
    currency: '{{ shop.currency }}'
  });
}
```

### Track Purchases

Create a new snippet called `datalyr-purchase.liquid` in your Snippets folder:

```liquid theme={null}
{% if first_time_accessed %}
<script>
  if (window.datalyr && window.Shopify && window.Shopify.checkout) {
    var checkout = {{ checkout | json }};
    var items = checkout.line_items.map(function(item) {
      return {
        product_id: item.product_id,
        variant_id: item.variant_id,
        name: item.title,
        price: item.price / 100,
        quantity: item.quantity
      };
    });

    datalyr.track('purchase', {
      order_id: checkout.order_id || checkout.order_number,
      revenue: checkout.total_price / 100,
      currency: checkout.currency,
      items: items,
      email: checkout.email,
      customer_id: checkout.customer_id
    });
  }
</script>
{% endif %}
```

Then add this snippet to your **checkout → Order Status Page** in Shopify Settings:

1. Go to **Settings → Checkout**
2. Scroll to **Order status page → Additional scripts**
3. Add: `{% include 'datalyr-purchase' %}`

## Track Custom Events

Track button clicks, form submissions, or any custom interaction:

```javascript theme={null}
// Track newsletter signup
document.querySelector('#newsletter-form').addEventListener('submit', function() {
  if (window.datalyr) {
    datalyr.track('newsletter_signup', {
      form_location: 'footer'
    });
  }
});

// Track video play
document.querySelector('#product-video').addEventListener('play', function() {
  if (window.datalyr) {
    datalyr.track('video_play', {
      video_title: 'Product Demo',
      product_id: '{{ product.id }}'
    });
  }
});
```

## Integrate with Shopify Customer Data

Track customer identification for cross-device attribution:

```liquid theme={null}
{% if customer %}
<script>
  if (window.datalyr) {
    datalyr.identify('{{ customer.id }}', {
      email: '{{ customer.email }}',
      first_name: '{{ customer.first_name }}',
      last_name: '{{ customer.last_name }}',
      orders_count: {{ customer.orders_count }},
      total_spent: {{ customer.total_spent | money_without_currency | remove: ',' }}
    });
  }
</script>
{% endif %}
```

Add this to your **theme.liquid** file after the main DATALYR script.

## Development vs Production

### Test in Development Theme

1. Create a duplicate of your theme for testing
2. Install DATALYR on the duplicate theme first
3. Preview and test thoroughly
4. Once verified, add to your live theme

### Use Different Workspaces

Create separate DATALYR workspaces for:

* **Development**: Test theme with workspace ID `dev_xxxxx`
* **Production**: Live theme with workspace ID `prod_xxxxx`

Use Liquid conditionals to switch workspace IDs:

```liquid theme={null}
{% if shop.domain contains 'myshopify.com' %}
  {% assign workspace_id = 'dev_xxxxx' %}
{% else %}
  {% assign workspace_id = 'prod_xxxxx' %}
{% endif %}

<script
  defer
  src="https://track.datalyr.com/dl.js"
  data-workspace-id="{{ workspace_id }}">
</script>
```

## Troubleshooting

**Not seeing events?**

Check that:

* Your tracking script is in the `<head>` section of theme.liquid
* You've saved the file after editing
* Your workspace ID is correct
* Ad blockers are disabled
* You're testing on the live storefront (not /admin)

**Events firing multiple times?**

Make sure you only have one instance of the DATALYR script in your theme. Search for `track.datalyr.com` in all theme files.

**Purchase tracking not working?**

Purchase tracking requires checkout access. Test with a real order using a test payment gateway or Shopify Payments in test mode.

**Liquid syntax errors?**

Make sure to close all Liquid tags properly. Use `{% %}` for logic and `{{ }}` for output.

## Remove App Installation (If Applicable)

If you previously installed the DATALYR app:

1. Go to **Settings → Apps and sales channels**
2. Find **DATALYR**
3. Click **Uninstall**
4. Proceed with manual installation

## Next Steps

<CardGroup cols={2}>
  <Card title="Verify Tracking" icon="check" href="/getting-started/installation/verify-tracking">
    Confirm events are tracking
  </Card>

  <Card title="Track Custom Events" icon="code" href="/sdks/web/custom-events">
    Learn event tracking API
  </Card>

  <Card title="Connect Ad Accounts" icon="megaphone" href="/integrations/overview">
    Link Meta, Google, or TikTok Ads
  </Card>

  <Card title="View Your Dashboard" icon="chart-line" href="/features/dashboard">
    See your tracking data
  </Card>
</CardGroup>

## Need Help?

Need help with custom Shopify tracking? Check our [troubleshooting guide](/troubleshooting/tracking-not-working) or contact support.