How to Synchronize Webflow eCommerce Product IDs with Facebook Catalog Ads

Overview

You'll learn how to 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 Facebook Dynamic Product Ads, accurate conversion tracking, and proper attribution of sales to specific products in your catalog.

Watch this step-by-step video guide:

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 Sources: Webflow product SKU field (recommended)

Before You Begin

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 (SKUs) that were viewed, added to cart, or purchased

• 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. When IDs match, Facebook can:

• Show Dynamic Product Ads featuring the exact products users viewed

• Retarget users with personalized ads based on their browsing behavior

• Attribute conversions to specific products in your catalog

• Optimize ad delivery based on which products drive the most sales

Step 1: Assign SKUs to Your Webflow Products

First, ensure all your Webflow products have SKU values that match your Facebook Product Catalog:

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

2. Navigate to the CMS section in the left sidebar

3. Click on Ecommerce and select Products

4. Click into each product to open the product editor

5. Scroll down 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

Step 2: Add Product SKU to Webflow Checkout Page

Now you'll add the SKU to your Webflow checkout page so PixelFlow can extract it and send it to Meta:

1. In Webflow Designer, navigate to the Pages panel

2. Scroll down and click on the Checkout page to open it

3. Locate the Order Items section where products are displayed in the cart

4. Click the + Add button to add a new element

5. Select Text Block from the element menu

6. Drag and drop the Text Block into the product item container (within the order items list)

Step 3: Bind the Text Block to the SKU Field

1. With the Text Block selected, a popup will appear asking "Get text from Products"

2. Click on the dropdown or Show all settings

3. From the field list, select SKU

4. The Text Block will now display the SKU value for each product in the cart

The SKU will now appear dynamically for each product based on the CMS data.

Step 4: Add the PixelFlow Product ID Class

Add the PixelFlow class so the product ID can be tracked and sent to Meta:

1. With the SKU Text Block still selected, look at the Style panel on the right

2. At the top of the Style panel, click into the Selector field

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

4. The class will be added to the element

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

Step 5: Hide the SKU from Customers (Optional)

If you don't want customers to see the SKU on the checkout page, you can hide it while still allowing PixelFlow to track it:

1. With the SKU Text Block selected, scroll down in the Style panel to the Layout section

2. Find the Display setting

3. Change Display from the default to None

4. The SKU will now be hidden from view but still present in the HTML for PixelFlow to extract

Step 6: Configure PixelFlow Event URL Tracking

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 at pixelflow.so/dashboard

2. Navigate to the Overview page

3. Locate the Events URLs section

4. Click + Add URL

For Checkout Page (InitiateCheckout Event):

1. Enter your checkout page URL (e.g., yoursite.com/checkout)

2. Select Initiate Checkout from the Event dropdown

3. Toggle "Extract data automatically?" to ON

4. Ensure "Block external tracking?" is toggled ON (this prevents Webflow from sending duplicate events)

5. Click Add URL

For Order Confirmation Page (Purchase Event):

1. Click + Add URL again

2. Enter your order confirmation page URL (e.g., yoursite.com/order-confirmation)

3. Select Purchase from the Event dropdown

4. Toggle "Extract data automatically?" to ON

5. Ensure "Block external tracking?" is toggled ON

6. Click Add URL

Step 7: Update and Publish Your Webflow Site

1. After adding the SKU element and class in Webflow, click Publish in the top-right corner

2. Select your production domain

3. Click Publish to selected domains

4. Your changes are now live

Step 8: Verify Product ID Synchronization

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

Using Meta Pixel Helper Chrome Extension

1. Install the Meta Pixel Helper Chrome 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 Meta Pixel Helper icon in your browser toolbar

6. Look for the InitiateCheckout event

7. Expand the event details and verify:

   • content_type: product

   • contents: Array showing product ID, quantity, and price

   • content_ids: Array containing your product SKUs

Using Facebook Events Manager

1. Open Facebook Events Manager

2. Select your Pixel from the Data Sources

3. Click on Test Events in the left sidebar

4. Complete a test checkout on your Webflow store

5. Return to Test Events and locate your InitiateCheckout or Purchase event

6. Click on the event to expand details

7. Verify the content_ids parameter contains your product SKUs

8. Confirm the SKU values match the product IDs in your Facebook Product Catalog

Using PixelFlow Dashboard

1. Log in to your PixelFlow dashboard

2. Navigate to Events or Analytics

3. Find your recent test event (InitiateCheckout or Purchase)

4. Click to expand event details

5. Verify the content_ids field shows your product SKUs

6. Confirm product name, price, and quantity are also captured

Setting Up Facebook Dynamic Product Ads

Once product ID synchronization is working, you can create Dynamic Product Ads in Facebook Ads Manager:

1. Open Facebook Ads Manager

2. Click Create to start a new campaign

3. Choose Sales or Catalog Sales as your objective

4. Select your Facebook Product Catalog

5. Choose your retargeting audience (e.g., people who viewed products, added to cart, or initiated checkout)

6. Facebook will automatically show personalized ads featuring the exact products users interacted with on your Webflow store

Troubleshooting

Best Practices for Product Catalog Synchronization

• Keep SKUs consistent: Never change SKU values once set unless you also update your Facebook Product Catalog

• Use SKU for all products: Don't leave any products without a SKU value, as they won't be trackable in Meta

• Match catalog structure: If you use product variants (sizes, colors), ensure your Webflow SKUs and Facebook Catalog structure align

• Test regularly: After adding new products, always test that their SKUs are being tracked correctly

• Monitor event match quality: Check your event match quality score in Meta Events Manager—properly synchronized product IDs help improve this score

• Update catalog regularly: Keep your Facebook Product Catalog in sync with your Webflow inventory, removing discontinued products and adding new ones

Limitations

• SKU field is required: Product synchronization only works if you use Webflow's SKU field. Custom CMS fields are not automatically supported without additional configuration

• Exact match required: Facebook requires exact SKU matches—even minor differences prevent catalog matching

• Standard checkout pages only: Automatic data extraction works with Webflow's standard checkout layout. Custom checkout implementations may require additional class configuration

• Facebook Catalog approval: Products must be approved in your Facebook Product Catalog before they can appear in Dynamic Product Ads

• Chrome-only for Pixel Helper: The Meta Pixel Helper extension only works in Chrome browsers for testing and verification

What's Next

Now that your Webflow product IDs are synchronized with Facebook Catalog Ads, you can:

• Set up Facebook Dynamic Product Ads to retarget users who viewed or added products to cart

• Track additional events on product pages using Event Classes on Webflow

• Enable Auto Track Webflow eCommerce Functionality for automatic data extraction

• Learn about Event Parameters to further enrich your tracking data

• Create retargeting audiences in Facebook Ads Manager based on product interactions

Getting Help

If you're experiencing issues with product ID synchronization:

• Verify the info-itm-id-pf class is applied to the SKU Text Block on your checkout page

• Use the Meta Pixel Helper Chrome extension to confirm product IDs are being sent with events

• Check that SKU values in Webflow exactly match product IDs in your Facebook Product Catalog

• Ensure "Block external tracking?" is enabled in PixelFlow to prevent duplicate events

For additional support:

• Email PixelFlow support at [email protected]

• Book a free setup call for personalized assistance

When contacting support, please provide:

• Your Webflow site URL

• Screenshots from Meta Pixel Helper showing event data

• Sample SKU values from both Webflow and Facebook Catalog

• Whether you're seeing events in Facebook Events Manager Test Events

• Screenshots of your PixelFlow event URL configuration