Pixelflow
Webflow

How to Synchronize Webflow eCommerce Product IDs with Facebook Catalog Ads

Synchronize your Webflow eCommerce product IDs with Facebook Catalog Ads so Meta can match your products when someone views, adds to cart, or purchases items from your store. This enables Dynamic Product Ads, accurate conversion tracking, and product-level attribution.

Watch this step-by-step video guide:

You need PixelFlow installed on your Webflow site and a Facebook Product Catalog with matching product IDs before you start.

Prerequisites

  • PixelFlow installed and configured on your Webflow site. See Webflow Setup.

  • Webflow eCommerce plan active with products created

  • Facebook Business Manager account with a Product Catalog created

  • SKU values assigned to all products in your Webflow CMS

  • Access to Webflow Designer with edit permissions

Compatibility

This feature works with:

  • Webflow eCommerce: Standard checkout and order confirmation pages

  • Supported events: Purchase, InitiateCheckout, AddToCart, ViewContent

  • Facebook Catalog types: E-commerce catalogs for Dynamic Product Ads

  • Product ID source: Webflow product SKU field

Why product ID synchronization matters: When your Webflow product IDs match the product IDs in your Facebook Product Catalog, Meta can track which specific products users interact with, enabling personalized retargeting ads and accurate conversion reporting.

Before you begin

SKUs must match exactly: The SKU values in your Webflow products must exactly match the product IDs in your Facebook Product Catalog.

Set up your Facebook Product Catalog first: Ensure you have a Product Catalog created in Commerce Manager with all your products uploaded before implementing this guide.

Understanding product ID synchronization

When someone interacts with your Webflow store, PixelFlow sends event data to Meta including:

  • content_ids — an array of product IDs

  • content_type — set to product for eCommerce events

  • contents — detailed product information including ID, quantity, and price

Facebook matches the content_ids from PixelFlow events with the product IDs in your Facebook Product Catalog.

Step 1: Assign SKUs to your Webflow products

  1. Log in to your Webflow account and open your project

  2. Navigate to CMS

  3. Click Ecommerce and select Products

  4. Open each product

  5. Scroll to the SKU field

  6. Enter a unique SKU that matches the product ID in your Facebook Product Catalog

  7. Click Save and repeat for all products

Use a consistent SKU format: Choose one SKU format and keep it consistent across all products.

Step 2: Add product SKU to the Webflow checkout page

  1. In Webflow Designer, open the Pages panel

  2. Open the Checkout page

  3. Locate the Order Items section

  4. Click + Add

  5. Select Text Block

  6. Place the Text Block inside the product item container

Automatic CMS binding: Webflow will detect that the element is inside a product collection and offer to bind it to product data.

Step 3: Bind the text block to the SKU field

  1. Select the Text Block

  2. Choose Get text from Products

  3. Select SKU

  4. Confirm the Text Block displays the SKU value

Step 4: Add the PixelFlow product ID class

  1. With the SKU Text Block selected, open the Style panel

  2. Click the Selector field

  3. Type info-itm-id-pf and press Enter

You can find this class name in the PixelFlow Classes Document.

What the class does: The info-itm-id-pf class tells PixelFlow that this element contains the product ID.

Step 5: Hide the SKU from customers

  1. With the SKU Text Block selected, go to the Layout section

  2. Find Display

  3. Change it to None

Hidden tracking works: PixelFlow can extract product IDs from hidden elements.

Step 6: Configure PixelFlow URL Triggers

Set up automatic data extraction for your checkout and order confirmation pages to prevent duplicate events from Webflow's built-in tracking:

  1. Log in to your PixelFlow dashboard

  2. Navigate to Overview

  3. Locate the URL Triggers section

  4. Click + Add URL

For the checkout page

  1. Enter your checkout page URL

  2. Select Initiate Checkout

  3. Turn on Extract data automatically?

  4. Keep Block external tracking? turned on

  5. Click Add URL

For the order confirmation page

  1. Click + Add URL again

  2. Enter your order confirmation page URL

  3. Select Purchase

  4. Turn on Extract data automatically?

  5. Keep Block external tracking? turned on

  6. Click Add URL

Prevent duplicate events: Webflow eCommerce has built-in Meta Pixel tracking. Turning on Block external tracking? helps prevent duplicate Purchase and InitiateCheckout events.

Automatic extraction enabled: PixelFlow captures currency, item count, value, product IDs, and other eCommerce data directly from Webflow's standard checkout structure.

Step 7: Update and publish your Webflow site

  1. After adding the SKU element and class in Webflow, click Publish

  2. Select your production domain

  3. Click Publish to selected domains

Step 8: Verify product ID synchronization

Test that your Webflow product IDs are being sent to Meta correctly.

Using Meta Pixel Helper

  1. Install the Meta Pixel Helper extension

  2. Open your live Webflow store in Chrome

  3. Add a product to your cart

  4. Navigate to the checkout page

  5. Click the extension icon

  6. Look for the InitiateCheckout event

  7. Verify the event includes content_ids

Using Facebook Events Manager

  1. Open Facebook Events Manager

  2. Select your Pixel

  3. Click Test Events

  4. Complete a test checkout

  5. Verify the event includes content_ids

Using PixelFlow dashboard

  1. Log in to your PixelFlow dashboard

  2. Navigate to Events or Analytics

  3. Find your recent test event

  4. Verify the content_ids field shows your product SKUs

Successful synchronization: If your product SKUs appear in content_ids and match your Facebook Product Catalog IDs, synchronization is working correctly.

Troubleshooting

Symptom

Likely cause

Solution

Product IDs not appearing in Meta events

The info-itm-id-pf class was not added

Verify the class is applied to the SKU element.

Facebook Catalog shows 0 products matched

SKU values in Webflow do not match product IDs in Facebook Catalog

Verify the SKUs match exactly.

Duplicate events appearing in Events Manager

Block external tracking? is not enabled

Edit your URL Triggers and turn Block external tracking? on for both URLs.

Content IDs show as an empty array

SKU field is empty or the text block is not bound to the SKU field

Verify all products have SKU values and the Text Block is bound to the SKU field.

Meta Pixel Helper shows no events

PixelFlow script not installed or ad blocker is active

Verify the PixelFlow script is installed. Disable ad blockers and test in incognito mode.

What's next

Now that your Webflow product IDs are synchronized, you can:

Getting help

If you're experiencing issues with product ID synchronization, verify the class is applied correctly, use Meta Pixel Helper to inspect the event payload, and confirm your SKUs match the Facebook Product Catalog. For extra help, email [email protected] or book a free setup call.

Was this helpful?
Was this helpful?