Connect Shopify Checkout Extensibility to Monetate

Shopify has announced that on August 13, 2024, it will no longer support its checkout.liquid layout on its clients' information, shipping, and payment checkout pages. Furthermore, on August 28, 2025, it will no longer support checkout.liquid on its clients' "Thank You" and order status pages as well as turn off apps using script tags and additional scripts under the post-purchase and order status pages. Therefore, any Shopify Plus client that customizes its checkout flow using checkout.liquid must upgrade to Shopify's checkout extensibility platform features suite.

In addition to moving its checkout flow customizations from checkout.liquid to checkout extensibility, each Monetate—Shopify Plus client must also create a custom pixel to implement code that tracks all product_added_to_cart and checkout_completed events and sends the appropriate data to Monetate.

Before publishing your draft checkout profile created using checkout extensibility, follow these steps to create a custom pixel containing code to send customer data from Shopify to Monetate.

1. Click Settings in Shopify admin.

   

2. Click Customer events on the Settings panel.

   

3. Click Add custom pixel.

   

4. In the Add custom pixel modal, type a descriptive name into Pixel name, and then click Add pixel.

   

5. Copy the following code and paste it into the code editor.

   This code doesn't account for any discounts you may offer on your site. You may need to customize this code to track discounts.

   var monetateT = new Date().getTime();
   const script = document.createElement('script');
   script.type = 'text/javascript';
   script.src =
     '//se.monetate.net/js/2/a-b099aae4/p/monetate-demo-site.myshopify.com/entry.js';
   const target = document.getElementsByTagName('script')[0];
   target.parentNode.insertBefore(script, target);
   
   window.monetateQ = window.monetateQ || [];
   
   analytics.subscribe('product_added_to_cart', (event) => {
     const lineItem = event.data.cartLine;
   
     window.monetateQ.push([
       'addCartRows',
       [{
         productId: lineItem.merchandise.product.id,
         quantity: lineItem.quantity,
         unitPrice: lineItem.merchandise.price.amount,
         sku: lineItem.merchandise.sku,
         currency: lineItem.merchandise.price.currencyCode,
       }, ],
     ]);
   
     window.monetateQ.push(['trackData']);
   });
   
   analytics.subscribe('checkout_completed', (event) => {
     const lineItems = event.data.checkout.lineItems;
   
     const purchasedItems = lineItems.map((lineItem) => {
       return {
         purchaseId: event.data.checkout.order.id,
         productId: lineItem.variant.product.id,
         quantity: lineItem.quantity,
         unitPrice: lineItem.variant.price.amount,
         sku: lineItem.variant.sku,
         currency: lineItem.variant.price.currencyCode,
       };
     });
   
     window.monetateQ.push(['setPageType', 'purchase']);
     window.monetateQ.push(['addPurchaseRows', purchasedItems]);
     window.monetateQ.push(['trackData']);
   });

6. Click Save.

   

7. Click Connect.

   

8. Click Connect in the advisory modal.

   

Because Shopify's custom pixels run in a sandbox environment, the data passed to Monetate through a custom pixel isn't visible in Monetate Inspector. However, you can view on your Monetate account's platform dashboard analytics based on the data sent from Shopify.