Shopify Checkout Extensibility: How to Enable Shopify Ecommerce Data Layer Using a Custom Pixel (without any app) in 1 minute

With Shopify’s transition to Customer Events and Custom Pixels, setting up a reliable ecommerce data layer is essential for accurate tracking in Google Tag Manager (GTM), analytics tools, and advertising platforms. A properly implemented data layer ensures consistent event data for key actions such as product views, add-to-cart events, checkouts, and purchases.

This guide explains how to enable a Shopify ecommerce data layer using a Custom Pixel, following a clean and scalable approach.

Why Use a Custom Pixel for the Shopify Data Layer?

Shopify’s Custom Pixel framework allows you to:

  • Capture ecommerce events in a standardized way
  • Avoid theme-level script injections
  • Maintain compatibility with Shopify’s privacy and consent model
  • Feed structured data directly into GTM and other platforms

Using a dedicated data layer script ensures your tracking setup remains stable across theme updates and Shopify changes.

Step 1: Copy the Shopify Data Layer Code

Start by copying the complete ecommerce data layer script

window.dataLayer = window.dataLayer || [];

var pageLocation = init.context.document.location.href;

dataLayer.push({

  page_location: pageLocation

});

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:

new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=

‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,’script’,’dataLayer’,’GTM-XXXXXX’);

// View Item List

analytics.subscribe(‘collection_viewed’, function(event) {

  var totalValue = 0; 

  var items = [];

  var dataLayerData = {

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    event: ‘optizent_view_item_list’,

    ecommerce: {

      item_list_id: event.data.collection.id,

      item_list_name: event.data.collection.title,

      currency: event.data.collection.productVariants[0]?.price.currencyCode,

    }

  };

  var productVariants = event.data.collection.productVariants;

  productVariants.forEach(function(productVariant) {

    totalValue = totalValue + productVariant.price.amount;

    var item = {

      item_name: productVariant.product.title,

      variant: productVariant.title === “Default Title” ? null : productVariant.title,

      variant_id: productVariant.id,

      item_id: productVariant.product.id,

      quantity: 1,

      price: productVariant.price.amount,

      item_category: productVariant.product.type

    }

    items.push(item);

  });

  dataLayerData.ecommerce.items = items;

  dataLayerData.ecommerce.value = totalValue;

  dataLayer.push(dataLayerData);

});

// Add To Cart

analytics.subscribe(‘product_added_to_cart’, function(event) {  

  var dataLayerData = {

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    event: ‘optizent_add_to_cart’,

    ecommerce: {

      currency: event.data.cartLine.cost.totalAmount.currencyCode,

      value: event.data.cartLine.cost.totalAmount.amount,

      items: [

        {

        item_name: event.data.cartLine.merchandise.product.title,

        variant: event.data.cartLine.merchandise.title,

        variant_id: event.data.cartLine.merchandise.id,

        item_id: event.data.cartLine.merchandise.product.id,

        quantity: event.data.cartLine.quantity,

        price: event.data.cartLine.merchandise.price.amount,

        item_category: event.data.cartLine.merchandise.product.type,

        item_brand: event.data.cartLine.merchandise.product.vendor,

        sku: event.data.cartLine.merchandise.product.sku

    }

      ]

    }

  };

  dataLayer.push(dataLayerData);

});

// Remove From Cart

analytics.subscribe(‘product_removed_from_cart’, function(event) {

  var dataLayerData = {

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    event: ‘optizent_remove_from_cart’,

    ecommerce: {

      currency: event.data.cartLine.cost.totalAmount.currencyCode,

      value: event.data.cartLine.cost.totalAmount.amount,

      items: [

        {

        item_name: event.data.cartLine.merchandise.product.title,

        variant: event.data.cartLine.merchandise.title,

        variant_id: event.data.cartLine.merchandise.id,

        item_id: event.data.cartLine.merchandise.product.id,

        quantity: event.data.cartLine.quantity,

        price: event.data.cartLine.merchandise.price.amount,

        item_category: event.data.cartLine.merchandise.product.type,

        item_brand: event.data.cartLine.merchandise.product.vendor,

        sku: event.data.cartLine.merchandise.product.sku

      }

      ]

    }

  };

  dataLayer.push(dataLayerData);

});

// View Item

analytics.subscribe(‘product_viewed’, function(event) {

  var dataLayerData = {

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    event: ‘optizent_view_item’,

    ecommerce: {

      currency: event.data.productVariant.price.currencyCode,

      value: event.data.productVariant.price.amount,

      items: [

        {

        item_name: event.data.productVariant.product.title,

        variant: event.data.productVariant.title === “Default Title” ? null: event.data.productVariant.title,

        variant_id: event.data.productVariant.id,

        item_id: event.data.productVariant.product.id,

        quantity: 1,

        price: event.data.productVariant.price.amount,

        item_category: event.data.productVariant.product.type,

        item_brand:  event.data.productVariant.product.vendor,

        sku: event.data.productVariant.product.sku,

    }

      ]

    }

  };

  dataLayer.push(dataLayerData);

});

// View Cart

analytics.subscribe(‘cart_viewed’, function(event) {

  var items = [];

  var dataLayerData = {

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    event: ‘optizent_view_cart’,

    ecommerce: {

      currency: event.data.cart.cost.totalAmount.currencyCode,

      value: event.data.cart.cost.totalAmount.amount,

    }

  };

  var lines = event.data.cart.lines;

  lines.forEach(function(line) { 

    var item = {

        item_name: line.merchandise.product.title,

        variant: line.merchandise.title === “Default Title” ? null : line.merchandise.title,

        variant_id: line.merchandise.id,

        item_id: line.merchandise.product.id,

        quantity: line.quantity,

        price: line.merchandise.price.amount,

        item_category: line.merchandise.product.type,

        item_brand: line.variant.product.vendor,

        sku: line.variant.sku

      }

    items.push(item);

  });

  dataLayerData.ecommerce.items = items;

  dataLayer.push(dataLayerData);

});

// Begin Checkout

analytics.subscribe(‘checkout_started’, function(event) {  

  var items = [];

  var dataLayerData = {

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    customer: {

      email: event.data.checkout.email,

      phone: event.data.checkout.phone,

      billingAddress: event.data.checkout.billingAddress,

      shippingAddress: event.data.checkout.shippingAddress

    },

    event: ‘optizent_begin_checkout’,

    ecommerce: {

      currency: event.data.checkout.currencyCode,

      value: event.data.checkout.totalPrice.amount,

      shipping: event.data.checkout.shippingLine.price.amount,

      vat: event.data.checkout.totalTax.amount,

      subTotal: event.data.checkout.subtotalPrice.amount,

      coupon: (event.data?.checkout?.discountApplications || []).map(discount => discount.title).join(‘,’),

    }

  };

  var lineItems = event.data.checkout.lineItems;

  lineItems.forEach(function(line) { 

    var item = {

        item_name: line.variant.product.title,

        variant: line.variant.title,

        variant_id: line.variant.id,

        item_id: line.variant.product.id,

        quantity: line.quantity,

        price: line.variant.price.amount,

        item_category: line.variant.product.type,

        item_brand: line.variant.product.vendor,

        sku: line.variant.sku

      }

    items.push(item);

  });

  dataLayerData.ecommerce.items = items;

  dataLayer.push(dataLayerData);

});

// Add Shipping Info

analytics.subscribe(‘checkout_shipping_info_submitted’, function(event) {

  var items = [];

  var dataLayerData = {

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    customer: {

      email: event.data.checkout.email,

      phone: event.data.checkout.phone,

      billingAddress: event.data.checkout.billingAddress,

      shippingAddress: event.data.checkout.shippingAddress

    },

    event: ‘optizent_add_shipping_info’,

    ecommerce: {

      currency: event.data.checkout.currencyCode,

      value: event.data.checkout.totalPrice.amount,

      shipping: event.data.checkout.shippingLine.price.amount,

      vat: event.data.checkout.totalTax.amount,

      subTotal: event.data.checkout.subtotalPrice.amount,

      coupon: (event.data?.checkout?.discountApplications || []).map(discount => discount.title).join(‘,’),

    }

  };

  var lineItems = event.data.checkout.lineItems;

  lineItems.forEach(function(line) { 

    var item = {

        item_name: line.variant.product.title,

        variant: line.variant.title,

        variant_id: line.variant.id,

        item_id: line.variant.product.id,

        quantity: line.quantity,

        price: line.variant.price.amount,

        item_category: line.variant.product.type,

        item_brand: line.variant.product.vendor,

        sku: line.variant.sku

      }

    items.push(item);

  });

  dataLayerData.ecommerce.items = items;

  dataLayer.push(dataLayerData);

});

// Add Contact Info

analytics.subscribe(‘checkout_contact_info_submitted’, function(event) {

  var items = [];

  var dataLayerData = {

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    customer: {

      email: event.data.checkout.email,

      phone: event.data.checkout.phone,

      billingAddress: event.data.checkout.billingAddress,

      shippingAddress: event.data.checkout.shippingAddress

    },

    event: ‘optizent_add_contact_info’,

    ecommerce: {

      currency: event.data.checkout.currencyCode,

      value: event.data.checkout.totalPrice.amount,

      shipping: event.data.checkout.shippingLine.price.amount,

      vat: event.data.checkout.totalTax.amount,

      subTotal: event.data.checkout.subtotalPrice.amount,

      coupon: (event.data?.checkout?.discountApplications || []).map(discount => discount.title).join(‘,’),

    }

  };

  var lineItems = event.data.checkout.lineItems;

  lineItems.forEach(function(line) { 

    var item = {

        item_name: line.variant.product.title,

        variant: line.variant.title,

        variant_id: line.variant.id,

        item_id: line.variant.product.id,

        quantity: line.quantity,

        price: line.variant.price.amount,

        item_category: line.variant.product.type,

        item_brand: line.variant.product.vendor,

        sku: line.variant.sku

      }

    items.push(item);

  });

  dataLayerData.ecommerce.items = items;

  dataLayer.push(dataLayerData);

});

//Add Payment Info

analytics.subscribe(‘payment_info_submitted’, function(event) {

  var items = [];

  var dataLayerData = {

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    customer: {

      email: event.data.checkout.email,

      phone: event.data.checkout.phone,

      billingAddress: event.data.checkout.billingAddress,

      shippingAddress: event.data.checkout.shippingAddress

    },

    event: ‘optizent_add_payment_info’,

    ecommerce: {

      currency: event.data.checkout.currencyCode,

      value: event.data.checkout.totalPrice.amount,

      shipping: event.data.checkout.shippingLine.price.amount,

      vat: event.data.checkout.totalTax.amount,

      subTotal: event.data.checkout.subtotalPrice.amount,

      coupon: (event.data?.checkout?.discountApplications || []).map(discount => discount.title).join(‘,’),

    }

  };

  var lineItems = event.data.checkout.lineItems;

  lineItems.forEach(function(line) { 

    var item = {

        item_name: line.variant.product.title,

        variant: line.variant.title,

        variant_id: line.variant.id,

        item_id: line.variant.product.id,

        quantity: line.quantity,

        price: line.variant.price.amount,

        item_category: line.variant.product.type,

        item_brand: line.variant.product.vendor,

        sku: line.variant.sku

      }

    items.push(item);

  });

  dataLayerData.ecommerce.items = items;

  dataLayer.push(dataLayerData);

});

// Purchase

analytics.subscribe(‘checkout_completed’, function(event) {  

  var items = [];

  var dataLayerData = {

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    customer: {

      email: event.data.checkout.email,

      phone: event.data.checkout.phone,

      billingAddress: event.data.checkout.billingAddress,

      shippingAddress: event.data.checkout.shippingAddress

    },

    event: ‘optizent_purchase’,

    ecommerce: {

      transaction_id: event.data.checkout.order.id,

      currency: event.data.checkout.currencyCode,

      value: event.data.checkout.totalPrice.amount,

      shipping: event.data.checkout.shippingLine.price.amount,

      vat: event.data.checkout.totalTax.amount,

      subTotal: event.data.checkout.subtotalPrice.amount,

      coupon: (event.data?.checkout?.discountApplications || []).map(discount => discount.title).join(‘,’),

    }

  };

  var lineItems = event.data.checkout.lineItems;

  lineItems.forEach(function(line) { 

    var item = {

        item_name: line.variant.product.title,

        variant: line.variant.title,

        variant_id: line.variant.id,

        item_id: line.variant.product.id,

        quantity: line.quantity,

        price: line.variant.price.amount,

        item_category: line.variant.product.type,

        item_brand: line.variant.product.vendor,

        sku: line.variant.sku

      }

    items.push(item);

  });

  dataLayerData.ecommerce.items = items;

  dataLayer.push(dataLayerData);

});

// View Search Result

analytics.subscribe(‘search_submitted’, function(event) {

  var value = 0;

  var currency = init.data.shop.paymentSettings.currencyCode;

  var dataLayerData = {

    event: ‘view_search_result’, 

    page_location: event.context.document.location.href,

    page_referrer: event.context.document.referrer,

    timestamp: event.timestamp,

    shopifyClientId: event.clientId,

    eventId: event.id,

    page_path: event.context.document.location.pathname,

    search_query: event.data.searchResult.query,

    ecommerce: {

      currency: currency

    }

  }

  var items = [];

  var totalValue = 0;

  var productVarients = event.data.searchResult.productVariants;

  productVarients.forEach(function(product, index) {

    totalValue  = totalValue + product.price.amount;

    var item = {

      item_id: product.product.id,

      sku: product.sku,

      varient_id: product.id,

      item_name: product.product.title,

      index: index,

      item_variant: product.title === “Default Title” ? undefined : product.title,

      item_category: product.product.type,

      price: product.price.amount,

      quantity: 1

    }

    items.push(item);

  });

  dataLayerData.ecommerce.items = items;

  dataLayerData.ecommerce.value = totalValue;

  dataLayer.push(dataLayerData);

});

Before moving forward, verify the following:

  • The script references the correct Google Tag Manager container ID
  • The GTM container is active and published
  • The code supports Shopify Customer Events (not legacy checkout scripts)

This validation step prevents misfiring events and broken tracking later.

Step 2: Add the Data Layer Code in Shopify Customer Events

Next, you will install the data layer using Shopify’s Custom Pixel interface.

  1. Go to Shopify Admin
  2. Navigate to Settings → Customer events
  3. Click Add custom pixel
  4. Paste the full data layer code into the editor
  5. Review the configuration carefully

The Custom Pixel environment ensures that events such as product views, cart interactions, and purchases are captured consistently across the storefront and checkout.

Step 3: Configure the Pixel to Run on All Pages

For the data layer to work correctly, the pixel must be set to run on all supported customer events.

Before saving:

  • Ensure the pixel execution is set to Always run
  • Confirm no restrictive conditions are applied
  • Review any consent-related settings to align with your privacy policy

Once configured, save and connect the pixel to activate it.

What Happens After Activation?

After the custom pixel is enabled:

  • Ecommerce events are pushed into the data layer automatically
  • GTM can listen for these events using custom event triggers

This setup creates a single source of truth for Shopify ecommerce tracking.

Testing and Validation

Always validate your implementation before relying on the data.

Recommended checks:

  • Use GTM Preview mode to inspect incoming data layer event ( inject GTM code manually with an extension to see the inspection) 
  • Trigger test actions (view product, add to cart, complete purchase)
  • Confirm event names and parameters populate correctly
  • Verify events appear in GA4, Google Ads, or other connected platforms

Best Practices

  • Keep the data layer implementation centralized in the Custom Pixel
  • Avoid duplicating ecommerce events via theme scripts
  • Document event names and parameters for long-term maintenance
  • Re-test after major Shopify updates or checkout changes
  • Align event firing with user consent requirements

Final Thoughts

Enabling a Shopify ecommerce data layer using a Custom Pixel is the most reliable and future-proof approach for modern tracking setups. By placing the data layer inside Shopify Customer Events, you gain stability, cleaner data, and better compatibility with GTM and analytics tools.

When implemented correctly, this method provides accurate ecommerce insights without compromising performance, privacy, or scalability.