Install Meta Pixel on Shopify (Step-by-Step)

How to install Meta (Facebook) Pixel on Shopify using native integration, manual installation, or Conversions API (CAPI).

Learn how to install Meta Pixel (formerly Facebook Pixel) on your Shopify store using the native Facebook Sales Channel, manual theme installation, or Conversions API for server-side tracking.

Installation Methods

Method	Difficulty	Server-Side Events	Customization	Recommended
Facebook Sales Channel	Easy	Yes (basic)	Low	Quick setup
Manual Theme Code	Medium	No	High	Full control
GTM + CAPI	Advanced	Yes (full)	Highest	Best practice

Method 1: Facebook Sales Channel (Easiest)

Shopify's native Facebook integration is the quickest way to install Meta Pixel.

Setup Steps

Install Facebook Sales Channel
- Go to Settings → Apps and sales channels
- Search for Facebook & Instagram
- Click Add channel
Connect Facebook Account
- Click Connect account
- Log in to your Facebook Business account
- Select your Facebook Business Manager
Select Meta Pixel
- Choose existing Pixel or create new one
- Pixel ID format: 1234567890123456
- Grant permissions when prompted
Configure Automatic Events
- Enable Automatic Advanced Matching
- Enable Conversions API (recommended)
- Click Save
Verify Installation
- Use Meta Pixel Helper browser extension
- Check Events Manager for real-time events

What Gets Tracked (Facebook Channel)

Automatic Events:

PageView - All page views
ViewContent - Product detail pages
AddToCart - Items added to cart
InitiateCheckout - Checkout begins
Purchase - Order completed

Automatic Advanced Matching: Automatically sends hashed customer data:

Email
First name
Last name
Phone
City
State
Zip code

Conversions API (CAPI): Basic server-side events automatically sent (Plus stores get more events).

Limitations of Facebook Channel

Limited customization
Cannot add custom events easily
Cannot modify event parameters
Cannot control event timing precisely
Basic CAPI implementation only

Method 2: Manual Theme Installation

Install Meta Pixel directly in your theme for more control.

Step 1: Get Your Pixel ID

Go to Meta Events Manager
Select your Pixel
Copy your Pixel ID (16-digit number)

Step 2: Add Base Pixel Code to Theme

Access Theme Code
- Go to Online Store → Themes
- Click Actions → Edit code
Open theme.liquid
- Find Layout folder
- Click theme.liquid

Add Meta Pixel Code

Add before </head> tag:

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>
<!-- End Meta Pixel Code -->

Replace YOUR_PIXEL_ID with your actual Pixel ID.

Save theme.liquid

Step 3: Add Advanced Matching (Recommended)

Advanced matching sends hashed customer data for better attribution:

<script>
{% if customer %}
  fbq('init', 'YOUR_PIXEL_ID', {
    em: '{{ customer.email | downcase }}',
    fn: '{{ customer.first_name | downcase }}',
    ln: '{{ customer.last_name | downcase }}',
    ph: '{{ customer.phone }}',
    ct: '{{ customer.default_address.city | downcase }}',
    st: '{{ customer.default_address.province_code | downcase }}',
    zp: '{{ customer.default_address.zip }}',
    country: '{{ customer.default_address.country_code | downcase }}'
  });
{% else %}
  fbq('init', 'YOUR_PIXEL_ID');
{% endif %}

fbq('track', 'PageView');
</script>

Note: Meta automatically hashes this data client-side. Never send unhashed PII to servers you don't control.

Step 4: Add ViewContent Event

Add to product pages (in product template or section):

<script>
  fbq('track', 'ViewContent', {
    content_name: '{{ product.title | escape }}',
    content_category: '{{ product.type | escape }}',
    content_ids: ['{{ product.id }}'],
    content_type: 'product',
    value: {{ product.selected_or_first_available_variant.price | money_without_currency }},
    currency: '{{ cart.currency.iso_code }}'
  });
</script>

Step 5: Add AddToCart Event

Track add to cart actions. For AJAX cart themes:

<script>
// Listen for Shopify cart updates
document.addEventListener('DOMContentLoaded', function() {
  const addToCartButtons = document.querySelectorAll('[name="add"]');

  addToCartButtons.forEach(function(button) {
    button.addEventListener('click', function(e) {
      const form = button.closest('form');
      const formData = new FormData(form);
      const variantId = formData.get('id');
      const quantity = formData.get('quantity') || 1;

      // Get product data
      const productId = '{{ product.id }}';
      const productName = '{{ product.title | escape }}';
      const productPrice = {{ product.selected_or_first_available_variant.price | money_without_currency }};

      fbq('track', 'AddToCart', {
        content_name: productName,
        content_ids: [productId],
        content_type: 'product',
        value: productPrice * quantity,
        currency: '{{ cart.currency.iso_code }}'
      });
    });
  });
});
</script>

Step 6: Add InitiateCheckout Event

For all stores (add to cart template or checkout button):

<script>
document.querySelector('[name="checkout"]').addEventListener('click', function() {
  fbq('track', 'InitiateCheckout', {
    content_ids: [
      {% for item in cart.items %}
        '{{ item.product_id }}'{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ],
    content_type: 'product',
    value: {{ cart.total_price | money_without_currency }},
    currency: '{{ cart.currency.iso_code }}',
    num_items: {{ cart.item_count }}
  });
});
</script>

Step 7: Add Purchase Event

All stores can track purchases on order confirmation page.

Go to: Settings → Checkout → Order status page → Additional scripts

<script>
  fbq('track', 'Purchase', {
    content_ids: [
      {% for line_item in line_items %}
        '{{ line_item.product_id }}'{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ],
    content_type: 'product',
    value: {{ total_price | money_without_currency }},
    currency: '{{ currency }}',
    num_items: {{ line_items.size }}
  });
</script>

Method 3: Google Tag Manager (Recommended)

Using GTM provides easier management and better integration with Shopify's data layer.

Prerequisites

GTM installed on Shopify
Meta Pixel ID

Setup Steps

Create Facebook Pixel Tag in GTM

a. In GTM, go to Tags → New

b. Tag Configuration → Custom HTML

c. Add Meta Pixel base code:

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>

d. Triggering: All Pages

e. Name: Meta Pixel - Base Code

Create Event Tags

See Meta Pixel Event Tracking for detailed GTM event setup.

Method 4: Conversions API (CAPI)

Conversions API sends events server-side for improved accuracy and iOS 14+ tracking.

Why Use CAPI?

iOS 14+ privacy changes: Browser tracking limited
Ad blocker bypass: Server events can't be blocked
Better attribution: Deduplication with browser events
Data accuracy: Less affected by tracking prevention

Implementation Options

Option A: Shopify Apps

Popular apps that implement CAPI:

Facebook & Instagram by Shopify (native, basic CAPI)
Elevar (advanced, paid)
Littledata (advanced, paid)
TrackifyX (affordable)

Option B: Custom Implementation

Requires:

Server access or Shopify Flow (Plus)
Meta Conversions API access token
Webhook to send events

Example webhook setup (requires development):

// Shopify webhook for order creation
// POST to https://graph.facebook.com/v18.0/{PIXEL_ID}/events

{
  "data": [{
    "event_name": "Purchase",
    "event_time": 1234567890,
    "user_data": {
      "em": "hashed_email",
      "ph": "hashed_phone",
      "fn": "hashed_first_name",
      "ln": "hashed_last_name",
      "ct": "hashed_city",
      "st": "hashed_state",
      "zp": "hashed_zip"
    },
    "custom_data": {
      "value": 99.99,
      "currency": "USD",
      "content_ids": ["123"],
      "content_type": "product"
    },
    "event_source_url": "https://yourstore.com",
    "action_source": "website"
  }],
  "access_token": "YOUR_ACCESS_TOKEN"
}

Recommended: Use Shopify's native Facebook channel or a dedicated CAPI app for easier implementation.

Verification & Testing

1. Meta Pixel Helper

Install Meta Pixel Helper Chrome extension:

Green icon = Pixel working correctly
Yellow = Warnings
Red = Errors

2. Meta Events Manager

Check real-time events:

Go to Events Manager
Select your Pixel
Click Test Events
Enter your store URL
Navigate your store and watch events appear

3. Test Full Funnel

View product → Check ViewContent
Add to cart → Check AddToCart
View cart → Check InitiateCheckout
Complete purchase → Check Purchase

4. Verify Event Parameters

Ensure events include:

content_ids (product IDs)
value (numeric, no currency symbols)
currency (ISO code: USD, EUR, etc.)
content_type (typically product)

Troubleshooting

Pixel Not Loading

Check:

Pixel ID is correct (16 digits)
No JavaScript errors in console
Ad blockers disabled for testing
Theme code saved properly

Duplicate Events

Cause: Multiple implementations (Facebook channel + manual code).

Fix:

Choose ONE method (Facebook channel OR manual)
Remove duplicate implementations
Use GTM to consolidate all tracking

Events Missing Parameters

Cause: Incorrect Liquid template or variable access.

Fix:

Check product/cart objects available in current template
Use money_without_currency filter for values
Verify arrays are formatted correctly

Purchase Event Not Firing

Cause: Pixel not on order confirmation page.

Fix: Add purchase event to Settings → Checkout → Order status page → Additional scripts.

iOS 14+ Tracking Issues

Cause: Apple's App Tracking Transparency limits browser tracking.

Solution: Implement Conversions API (CAPI) for server-side events.

Privacy & Compliance

Integrate with Shopify Customer Privacy API:

document.addEventListener('visitorConsentCollected', function(event) {
  const consent = event.detail;

  if (consent.marketing) {
    // Initialize Meta Pixel only after consent
    fbq('init', 'YOUR_PIXEL_ID');
    fbq('track', 'PageView');
  }
});

Data Processing Options

In Meta Events Manager:

Enable Limited Data Use for California (CCPA)
Configure Data Processing Options for GDPR
Review Data Retention settings

Next Steps

Meta Pixel Event Tracking - Configure custom events
GTM Setup - Install GTM for easier management
Events Not Firing - Debug tracking issues

For general Meta Pixel concepts, see Meta Pixel Guide.

शीर्ष पर वापस जाएँ

Install Meta Pixel on Shopify (Step-by-Step)

Installation Methods

Method 1: Facebook Sales Channel (Easiest)

Setup Steps

What Gets Tracked (Facebook Channel)

Limitations of Facebook Channel

Method 2: Manual Theme Installation

Step 1: Get Your Pixel ID

Step 2: Add Base Pixel Code to Theme

Step 3: Add Advanced Matching (Recommended)

Step 4: Add ViewContent Event

Step 5: Add AddToCart Event

Step 6: Add InitiateCheckout Event

Step 7: Add Purchase Event

Method 3: Google Tag Manager (Recommended)

Prerequisites

Setup Steps

Method 4: Conversions API (CAPI)

Why Use CAPI?

Implementation Options

Verification & Testing

1. Meta Pixel Helper

2. Meta Events Manager

3. Test Full Funnel

4. Verify Event Parameters

Troubleshooting

Pixel Not Loading

Duplicate Events

Events Missing Parameters

Purchase Event Not Firing

iOS 14+ Tracking Issues

Privacy & Compliance

Customer Consent

Data Processing Options

Next Steps