--- title: Connect Shopify Checkout Extensibility to Monetate slug: js-api/connect-shopify-checkout-extensibility description: How to create a Shopify custom pixel with JavaScript code to pass customer data from a Shopify Plus account to a Monetate JavaScript API implementation image: https://archbee-image-uploads.s3.amazonaws.com/ceIfEvQHzQk1IVxoRWUh7/K9eTL4jKm7UQINb6zNziJ-20250912-181225.png docTags: createdAt: 2024-07-01T18:00:16.483Z --- :::hint{type="warning"} This content is for Monetate clients that are also Shopify Plus clients. ::: Shopify has announced that on August 13, 2024, it will no longer support its [`checkout.liquid layout`](https://shopify.dev/docs/storefronts/themes/architecture/layouts/checkout-liquid) 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`](https://shopify.dev/docs/api/liquid/objects#script) 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](https://www.shopify.com/plus/upgrading-to-checkout-extensibility) platform features suite. :::hint{type="info"} See Shopify's [checkout extensibility upgrade documentation](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-extensibility) for the prerequisites and steps to upgrade from checkout.liquid to checkout extensibility. ::: 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](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels) 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. ![Callout of the Settings option in the left-hand navigation of Shopify admin](https://dyzz9obi78pm5.cloudfront.net/app/image/id/656613f54e5a7763e80e36fc/n/shopify-admin-settings-callout.png) 2. Click **Customer events** on the Settings panel. !["Callout of the 'Customer events' option in the left-hand navigation of the Settings panel of Shopify admin](https://dyzz9obi78pm5.cloudfront.net/app/image/id/6566144c0f64f4062e26a3ed/n/shopify-admin-settings-customer-events-callout.png) 3. Click **Add custom pixel**. ![Callout of the 'Add pixel' button on the 'Customer events' panel of the Shopify admin settings](https://dyzz9obi78pm5.cloudfront.net/app/image/id/65661486339489028b7fe04e/n/shopify-admin-settings-customer-events-add-custom-pixel-callout.png) 4. In the Add custom pixel modal, type a descriptive name into **Pixel name**, and then click **Add pixel**. ![Callout of the 'Pixel name' field and of the 'Add pixel' button on the 'Add custom pixel' modal of the 'Customer events' panel of the Shopify admin settings](https://dyzz9obi78pm5.cloudfront.net/app/image/id/656614de6805534645538544/n/shopify-admin-settings-customer-events-add-custom-pixel-modal.png) 5. Copy and paste the [custom pixel's code](./#code-sample) into the code editor and then click **Save**. ![Callout of the Save button for the code editor on the 'Customer events' panel of the Shopify admin settings](https://dyzz9obi78pm5.cloudfront.net/app/image/id/65661597ef28507fd74da413/n/shopify-admin-settings-customer-events-custom-pixel-save.png) 6. Click **Connect**. ![Callout of the Connect button on the 'Customer events' panel of the Shopify admin settings](https://dyzz9obi78pm5.cloudfront.net/app/image/id/656615fe7106cf7c754ddd33/n/shopify-admin-settings-customer-events-custom-pixel-connect.png) 7. Click **Connect** in the advisory modal. ![Callout of the Connect button on the custom pixel advisory modal of the 'Customer events' panel of the Shopify admin settings](https://dyzz9obi78pm5.cloudfront.net/app/image/id/6566166909f0b83efa32366f/n/shopify-admin-settings-customer-events-connect-custom-pixel-modal.png) Because Shopify's custom pixels run in a [sandbox environment](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#pixels-sandbox-environment), the data passed to Monetate through a custom pixel isn't visible in [Monetate Inspector](https://docs.monetate.com/docs/install-the-monetate-inspector-browser-plug-in). However, you can view on your Monetate account's [platform dashboard](https://docs.monetate.com/docs/platform-dashboard) analytics based on the data sent from Shopify. ## Code Sample Copy and paste this code into the code editor of the custom pixel. :::hint{type="info"} This code doesn't account for any discounts you may offer on your site. You may need to customize this code to track discounts. ::: :::CodeblockTabs Code to Track All product\_added\_to\_cart and checkout\_completed Events ```javascript 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']); }); ``` :::