How to Connect Webflow to Google Shopping

Three ways to connect Webflow to Google Shopping

1. Webflow's built-in integrations

Webflow Ecommerce has a built-in Google integration (Settings > Ecommerce > Integrations) that gives you a data feed URL for Google Merchant Center to fetch on a schedule. It covers Google only, and because Webflow has no brand or GTIN fields, check Merchant Center for products flagged for missing identifiers.

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 Google Shopping 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 Google Catalog TSV 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 Google Shopping 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 Google Shopping reads on a schedule, and one connection can usually feed several platforms at once.

What Google Shopping needs

• A Google Merchant Center account with your website verified and claimed, plus shipping and return policies.
• Seven fields per product: id, title, description, link, image_link, availability (in_stock, out_of_stock, preorder, or backorder), and price.
• Product identifiers: brand for new products, and gtin where one exists - or identifier_exists set to no for handmade items.
• A product source - a file Google fetches daily, weekly, or monthly from a URL, among other options.

How your Webflow fields map to Google Shopping

The table above shows where each Google Shopping 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.
• Your domain: a free Webflow site's product pages live on a webflow.io address, which usually can't be claimed or verified as your own website with Google Shopping. Connect your own domain to your Webflow site before you build the feed.
• 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 Google Shopping account ready - see "What Google Shopping 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. Google Shopping 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 product source in Merchant Center. Go to Settings > Data sources, add a product source from a file, choose to fetch it from a URL, add the login under Add authentication information, and schedule a daily fetch.
5. Check the first import. Review the errors Google Shopping reports and fix them in Webflow, not in the feed - your store stays the single source of truth.

Common Webflow to Google Shopping problems

• Products on a free webflow.io address. Google Shopping wants product links on a website you've claimed or verified, which a free Webflow address usually can't be. Connect a custom domain first.
• 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.
• Price or availability mismatch. Google compares your feed with your product page. A sale, a tax setting, or a cached page that shows a different price will get items disapproved.
• Missing identifiers. Products with barcodes need a gtin; handmade products should set identifier_exists to no. See How to Set Up a Google Merchant Center Feed for a Small Store.

Related guides

For more on Google Shopping itself, see Google Product Category: How to Pick the Right One. On a different store platform? WooCommerce to Google Shopping, PrestaShop to Google Shopping, Wix to Google Shopping, Square to Google Shopping, Squarespace to Google Shopping, and BigCommerce to Google Shopping cover the same setup for those stores.