How to Connect Webflow to Facebook

Three ways to connect Webflow to Facebook

1. Webflow's built-in integrations

Webflow Ecommerce has a built-in Facebook integration (Settings > Ecommerce > Integrations) that gives you a data feed URL to add to a catalog in Commerce Manager. Webflow notes that the feed doesn't include inventory counts, so it can't be used to create a Facebook Shop, and it covers Facebook and Instagram only.

2. Export a file yourself

Webflow can export your products to a CSV, but the file uses Webflow's own columns - not the field names and formats Facebook expects - and it's a snapshot, so it's out of date as soon as a price or stock level changes. If you go this way, start from our free Facebook Catalog CSV Template Generator so at least the columns are right.

3. A store catalog connector

A connector reads your Webflow store through Webflow's API, using a site API token you create in your site settings, and builds the Facebook feed for you. Webflow can notify a connector through webhooks when a product or its stock changes, so updates arrive within moments - and only the products that changed need to be read again. The connector hosts the feed at a URL that Facebook reads on a schedule, and one connection can usually feed several platforms at once.

What Facebook needs

• A Meta business portfolio with access to Commerce Manager, where your catalog lives.
• Nine fields per product: id, title, description, availability (in stock or out of stock), condition, price, link, image_link, and brand.
• Images in JPEG or PNG, at least 500 x 500 pixels and up to 8 MB.
• A data feed - a file you upload, or a URL that Commerce Manager fetches hourly, daily, or weekly.

How your Webflow fields map to Facebook

The table above shows where each Facebook field comes from in your Webflow store. A few Webflow details need extra care:

• Variants: in Webflow, each combination of options (Navy / M, Navy / L...) is its own SKU, and each SKU should become its own listing with its own price, stock, and image, grouped under the product with a shared item_group_id. Name your options Color and Size so they're read as color and size.
• Sale prices: a compare-at price above your price means the product is on sale - the compare-at price is the regular price, and your price is the sale price.
• Product type: Webflow categories are what you map to a Google product category. Skip shopping groups like "Sale" or "New" and map the ones that say what the product is.
• Brand and identifiers: Webflow has no brand or GTIN fields. Use your store's name as a default brand - for your own products, it is the brand - and most own-brand and handmade products don't have a GTIN anyway.
• Clothing details: Webflow has no gender or age group fields, and Google and Facebook require them - with a color and a size - on clothing and shoes. Set them by product name if your tool supports it.

Step by step

1. Get your Facebook account ready - see "What Facebook needs" above.
2. Create a site API token. In Webflow, open your site's Site settings > Apps & integrations, scroll to API access, and click Generate API token. Give it read access to E-commerce and CMS - plus read and write access to Sites if your connector sets up automatic updates for you - and copy the token. Webflow shows it only once.
3. Map your product types to Google product categories. Facebook needs to know what each product is. Map each of your Webflow categories to one category from the Google product category list once, and every product with that value is categorized from then on.
4. Add the data feed in Commerce Manager. Open your catalog, go to Data sources, add items with a data feed, choose a URL, and paste your feed URL with its login. Pick a daily schedule.
5. Check the first import. Review the errors Facebook reports and fix them in Webflow, not in the feed - your store stays the single source of truth.

Common Webflow to Facebook problems

• Drafts, archived products, digital products, and services. Only published physical products belong in the feed - draft or archive a product in Webflow and it should drop out. Digital downloads and services aren't sold through shopping catalogs.
• Items rejected for a missing brand. Facebook requires brand on every item - set a default if your store doesn't record one.
• Backorders. Facebook has no "preorder" value, so backordered items need to be sent as in stock or out of stock. Facebook Catalog Feed Errors, Fixed covers the rest.

Related guides

For more on Facebook itself, see How to Create a Facebook Catalog Without Shopify. On a different store platform? WooCommerce to Facebook, PrestaShop to Facebook, Wix to Facebook, Square to Facebook, Squarespace to Facebook, and BigCommerce to Facebook cover the same setup for those stores.