Guide

Shopify

Manage your custom pixels

Last updated: Mar 14, 2024

You can manage your custom pixels in the Customer events area of your Shopify admin. Before you add a pixel to your Shopify store, you need to create the code for your custom pixel.

Add a custom pixel

After you create the code for your custom pixel, you can add it to your Shopify store.

Before you add a custom pixel, remove or modify any existing pixels to ensure customer events aren't counted twice. Existing pixel code should be manually removed from any place it exists, such as theme.liquid, checkout.liquid (Plus merchants only), and the Additional scripts in your checkout settings.

Steps:

From your Shopify admin, go to Settings > Customer events.
Give your pixel a unique name. 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.
Paste your custom javascript pixel code into the Code window.
Click Save to save your custom pixel. If you're ready to connect your custom pixel now, then you can click Connect pixel to start tracking your events.

Here is an example how to subscribe events:

// Subscripe to events
analytics.subscribe("product_added_to_cart", async (event) => {
    capture('add_to_cart', {
    price: event.data.cartLine.merchandise.price.amount,
    product_title: event.data.cartLine.merchandise.product.title,
    quantity: event.data.cartLine.quantity,
    total_cost: event.data.cartLine.cost.totalAmount.amount,
  });
});

analytics.subscribe("product_viewed", (event) => {
   capture('product_viewed', {
    url: event.context.document.location.href,
    product_id: event.data.productVariant.product.id,
    product_price: event.data.productVariant.price.amount,
    product_currencyCode: event.data.productVariant.price.currencyCode,
    product_title: event.data.productVariant.product.title,
    product_variant: event.data.productVariant.title,
    product_sku: event.data.productVariant.sku,
    product_image: event.data.productVariant.image.src,
  });
});

analytics.subscribe("checkout_started", (event) => {
   capture('checkout_started', {
    token: event.data.checkout.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data.checkout.email,
    phone: event.data.checkout.phone,
    first_name: event.data.checkout.shippingAddress.firstName,
    last_name: event.data.checkout.shippingAddress.lastName,
    address1: event.data.checkout.shippingAddress.address1,
    address2: event.data.checkout.shippingAddress.address2,
    city: event.data.checkout.shippingAddress.city,
    country: event.data.checkout.shippingAddress.country,
    countryCode: event.data.checkout.shippingAddress.countryCode,
    province: event.data.checkout.shippingAddress.province,
    provinceCode: event.data.checkout.shippingAddress.provinceCode,
    zip: event.data.checkout.shippingAddress.zip,
    orderId: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
    subtotal: event.data.checkout.subtotalPrice.amount,
    shipping: event.data.checkout.shippingLine.price.amount,
    value: event.data.checkout.totalPrice.amount,
    tax: event.data.checkout.totalTax.amount,
    items: event.data.checkout.lineItems,
  });
});

analytics.subscribe("checkout_completed", (event) => {
      identify(event.data.checkout.email, {
      email: event.data.checkout.email, 
      name: event.data.checkout.shippingAddress.firstName,
      phone: event.data.checkout.phone,
    });
});

analytics.subscribe("checkout_completed", (event) => {
   capture('purchase', {
    token: event.data.checkout.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data.checkout.email,
    phone: event.data.checkout.phone,
    first_name: event.data.checkout.shippingAddress.firstName,
    last_name: event.data.checkout.shippingAddress.lastName,
    address1: event.data.checkout.shippingAddress.address1,
    address2: event.data.checkout.shippingAddress.address2,
    city: event.data.checkout.shippingAddress.city,
    country: event.data.checkout.shippingAddress.country,
    countryCode: event.data.checkout.shippingAddress.countryCode,
    province: event.data.checkout.shippingAddress.province,
    provinceCode: event.data.checkout.shippingAddress.provinceCode,
    zip: event.data.checkout.shippingAddress.zip,
    orderId: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
    subtotal: event.data.checkout.subtotalPrice.amount,
    shipping: event.data.checkout.shippingLine.price.amount,
    value: event.data.checkout.totalPrice.amount,
    tax: event.data.checkout.totalTax.amount,
    items: event.data.checkout.lineItems,
  });
});