Installing the Podsights Pixel on Shopify

The following is a simple to installing the Podsights Pixel in Shopify. If you run into any issues, please feel to reach out to hello@podsights.com

Many Shopify Themes have custom ways to add 3rd party JavaScript. Please talk to your Shopify admin or your developer. You can add the base JavaScript script to the theme.liquid like so:

Page View Event

Select “Edit Code” from the Theme Actions in “Online Store” > “Themes”

Shopify Edit Code

Select “theme.liquid” from the available files and add the install code. Make sure to add your Pixel Id.

Shopify Edit Them

Additional Scripts

In order to add the purchase event to the checkout confirmation page you’ll need to naviagte to “Settings” > “Checkout”

Shopify Settings

Then you’ll need to find “Additional Scripts” in the “Order processing” section.

Shopify Settings

You can then add the following code replacing “YOUR PIXEL ID” with your pixel ID.:

<script>
  (function(w, d){
   var id='pdst-capture', n = 'script';
   if (!d.getElementById(id)){
     w.pdst = w.pdst || function() {(w.pdst.q = w.pdst.q || []).push(arguments);};
     var e = d.createElement(n); e.id = id; e.async=1;
     e.src = 'https://cdn.pdst.fm/ping.min.js';
     var s = d.getElementsByTagName(n)[0];
     s.parentNode.insertBefore(e, s);
   }
   w.pdst('conf', { key: 'YOUR PIXEL ID' });
  })(window, document);

  {% assign line_item_quantities = order.line_items | map: 'quantity' %}
  {% assign discount_code = '' %}
  {% for discount in order.discounts %}
     {% assign discount_code = discount.code %}
  {% endfor %}

  pdst("view");
  pdst("purchase", {
    value: {{order.total_price}}/100,
    quantity: ([{% for quantity in line_item_quantities %}{{quantity}},{% endfor %}]).reduce(function(a,b){return a+b}),
    currency: "USD",
    order_id: "{{checkout.order_id}}",
    discount_code : "{{discount_code}}",
  });
</script>

Select Save and you are done.