Installation

Shopify

Add Clickyard tracking to your Shopify store by editing your theme's liquid files. No app installation required.

Estimated time: 2 minutes

Installation Steps

1 Get Your Tracking Code

Go to your Clickyard dashboard and copy your tracking code.

<script>
(function(w, d, s, o){
    var j = d.createElement(s);
    j.async = true;
    j.src = 'https://s.clickyard.ai/script.js';
    j.onload = function() {
        if (document.readyState !== 'loading') Clickyard.init(o);
        else document.addEventListener("DOMContentLoaded", function() {
            Clickyard.init(o);
        });
    };
    d.head.insertBefore(j, d.head.firstElementChild);
})(window, document, 'script', {
    id: 'YOUR-WEBSITE-ID'
});
</script>

2 Open Theme Editor

In your Shopify admin:

Go to Online Store → Themes
Find your current theme and click Actions → Edit code

3 Find theme.liquid

In the left sidebar under Layout, click on theme.liquid.

Note: Some themes may use a different file like base.liquid. Look for the file containing the <head> tag.

4 Add the Tracking Code

Find the closing </head> tag and paste the tracking code before it:

  ...
  {{ content_for_header }}

  <!-- Clickyard Tracking -->
  <script>
  (function(w, d, s, o){
      var j = d.createElement(s);
      j.async = true;
      j.src = 'https://s.clickyard.ai/script.js';
      j.onload = function() {
          if (document.readyState !== 'loading') Clickyard.init(o);
          else document.addEventListener("DOMContentLoaded", function() {
              Clickyard.init(o);
          });
      };
      d.head.insertBefore(j, d.head.firstElementChild);
  })(window, document, 'script', {
      id: 'YOUR-WEBSITE-ID'
  });
  </script>
</head>

Important: Replace YOUR-WEBSITE-ID with your actual website ID from Clickyard dashboard.

5 Save Changes

Click "Save" in the top right corner to apply your changes.

Done! Clickyard is now tracking your Shopify store pages.

Important: The theme.liquid file only tracks your store's main pages. Checkout and thank-you pages use a different layout and require additional setup for purchase tracking (see below).

Tracking Purchases

Checkout pages don't use theme.liquid, so you need to install the Clickyard script separately via Custom Pixel.

Install Script on Checkout Pages

Create a Custom Pixel to load Clickyard on checkout pages:

Go to Settings → Customer events
Click "Add custom pixel"
Name it "Clickyard" and paste this code:

(function(w, d, s, o){
    var j = d.createElement(s);
    j.async = true;
    j.src = 'https://s.clickyard.ai/script.js';
    j.onload = function() {
        if (document.readyState !== 'loading') Clickyard.init(o);
        else document.addEventListener("DOMContentLoaded", function() {
            Clickyard.init(o);
        });
    };
    d.head.insertBefore(j, d.head.firstElementChild);
})(window, document, 'script', {
    id: 'YOUR-WEBSITE-ID'
});

Click "Save" and then "Connect" to activate the pixel.

Set Up Page Goal

In Clickyard, create a Page Goal with this URL pattern:

https://your-shop.myshopify.com/checkouts/*/thank_you

Now Clickyard will track visits to the thank-you page as conversions.

Why Custom Pixel?

Shopify removed "Additional Scripts" from checkout settings. Custom Pixels is the new official way to add tracking to checkout pages.

Verify Installation

Visit your store in a new browser tab
Open Developer Tools (F12 or right-click → Inspect)
Go to the Network tab
Filter by clickyard
Refresh the page — you should see requests to s.clickyard.ai