For your tracking events to fire correctly in Shopify, you need to ensure these two steps have been completed. Once this is complete, we recommend a test purchase to ensure conversion tracking is setup correctly.

Step #1 - How to Enable UpStackified's Shopify Theme App Extension

Login to your Shopify Store
On the Sidebar click "Online Store" -> "Themes"
Click "Customize" button on Theme section
On the Left Sidebar, click the icon for "App Embeds"
Enable the "Upstackified Pixel" and click "Save" button
Once enabled, the "UpStackified Pixel" will look like this

Step #2 - Setup the Conversion Pixel in "Checkout Settings" / "Additional Scripts"

Navigate back to your shopify homepage
Click "Settings" on left sidebar navigation
Click "Checkout" from the settings navigation menu
Scroll all the way to the bottom of Checkout Settings to find the "Additional Scripts" section
Copy and Paste the following script at the top of your "Additional Scripts" section

{% if shop.metafields.adtr != blank %}
  {%- for field in shop.metafields.adtr -%}
    {% assign key = field | first %}
    {% assign value = field | last %}
    {% if key contains 'adtr.config' %}
      <script>
        window._adtrPixelDetails = '{{value}}';
      </script>
    {% endif %}
  {%- endfor -%}
{% endif %}
<script src="https://prod2-cdn.upstackified.com/scripts/px/adtr-shopify.min.js"></script>
<script>
  var adtOrderData = {
    customerId:
      window?.Shopify?.checkout?.customer_id ??
      '{{ order.customer_id || checkout.customer_id || order.customer.id || checkout.customer.id || order.checkout.customer.id}}',
    id: window?.Shopify?.checkout?.order_id ?? '{{ order_id || order.id }}',
    name: '{{ order_name || order.name }}',
    email: '{{ email || order.email }}',
    number: '{{ order_number || order.number }}',
    tags: '{% for line_item in line_items %} {% for tag in line_item.product.tags %}{{ tag}},{% endfor %}{% endfor %}',
    collections:
      '{% for line_item in line_items %}  {% for collection in line_item.product.collections %}{{ collection.id }},{% endfor %}{% endfor %}',
  };
  window._orderJson = JSON.stringify('{{order}}');
  window.adtOrderData = adtOrderData;  
  window._adqLoaded = 0;
  window._upsqueue = window._upsqueue || [];

  window.adq = function () {
    window._upsqueue.push(arguments);
  };
  window._upssqueue = window._upssqueue || [];
  window._upssClient = function () {
    window._upssqueue.push(arguments);
  };
  window._upssClient('init');
</script>

Once complete, click "Save" button

UpStackified Tracking Pixel is now enabled on your Shopify Store.

Next Steps:

Step #3 - How To Setup UpStackified with "Shopify Custom Pixel"

In order to track checkouts events in Shopify, a custom pixel needs to be created. Follow these instructions to set up your Shopify Custom Pixel Code:

From your Shopify admin, go to Settings > Customer events.
Click Add Custom Pixel Button
Give your pixel a unique name, "UpStackified Pixel". If you enter the name of a custom pixel that already exists, then you'll be prompted to give your pixel a different name.
Click Add pixel to open the event editor.
Copy the code below Paste your custom javascript pixel code into the Code window.

window._adtrPixelDetails="upstackified-pixel-id";

window._upsLoaded=0,window._upssqueue=window._upssqueue||[],window._upstack=window?._upstack||function(){window._upssqueue.push(arguments)},window._upssClient=function(){window._upssqueue.push(arguments)};const script=document.createElement("script");script.setAttribute("src","https://prod2-cdn.upstackified.com/scripts/px/ups-ext.min.js"),script.setAttribute("async",""),document.head.appendChild(script),window._upssClient("initExt"),analytics.subscribe("page_viewed",(t=>{window._upstack("track","shopify_page_viewed",t)})),analytics.subscribe("cart_viewed",(t=>{window._upstack("track","shopify_cart_viewed",t)})),analytics.subscribe("checkout_started",(t=>{window._upstack("track","shopify_checkout_started",t)})),analytics.subscribe("checkout_contact_info_submitted",(async t=>{window._upstack("track","shopify_checkout_contact_info_submitted",t)})),analytics.subscribe("checkout_address_info_submitted",(async t=>{window._upstack("track","shopify_checkout_address_info_submitted",t)})),analytics.subscribe("checkout_shipping_info_submitted",(async t=>{window._upstack("track","shopify_checkout_shipping_info_submitted",t)})),analytics.subscribe("payment_info_submitted",(async t=>{window._upstack("track","shopify_payment_info_submitted",t)})),analytics.subscribe("search_submitted",(t=>{window._upstack("track","shopify_search_submitted",t)})),analytics.subscribe("checkout_completed",(t=>{window._upstack("track","shopify_checkout_completed",t)})),analytics.subscribe("collection_viewed",(t=>{window._upstack("track","shopify_collection_viewed",t)})),analytics.subscribe("product_viewed",(t=>{window._upstack("track","shopify_product_viewed",t)})),analytics.subscribe("product_added_to_cart",(t=>{window._upstack("track","shopify_product_added_to_cart",t)})),analytics.subscribe("product_removed_from_cart",(t=>{window._upstack("track","product_removed_from_cart",t)}));

Replace upstackified-pixel-id with your pixel ID. For Instructions on finding your pixelID, click here.
Click Save to save your custom pixel.
Click Connect pixel to start tracking your events.

Do not remove additional scripts from checkout. There are no additional steps to take once completed

How to Validate my Custom Pixel is setup correctly?
1. To validate you are setup correctly, install Facebook Pixel Helper extension. https://developers.facebook.com/docs/meta-pixel/support/pixel-helper/
2. Ensure the extension is running and navigate to a product page on your store
3. Ensure Facebook Pixel Helper has PageView and AddCart Events
4. If you have any issues - please email [email protected]