BigCommerce

Get full design control over product and content-driven pages while BigCommerce handles payments, variant inventory, enterprise-scale catalog management, live stock levels, customer-specific pricing, and PCI-compliant checkout.

In this setup, BigCommerce runs the catalog, cart, inventory, and checkout while your Webflow site handles page layouts and visual design. Connecting the two lets you display BigCommerce products on custom pages, embed buy buttons, sync catalog data into the Webflow CMS, and route orders through automation or the APIs.

This integration fits design teams building branded storefronts and agencies delivering B2B wholesale portals or headless commerce architectures. Fashion brands use it for animation-heavy lookbooks backed by large SKU catalogs. Enterprise operations teams use it to serve wholesale and retail fronts from one BigCommerce backend.

How to integrate BigCommerce with Webflow

What is BigCommerce? BigCommerce is an Open SaaS e-commerce platform for mid-market and enterprise B2B and B2C brands. It supports composable and headless commerce. It exposes over 90% of its platform data to the API and handles 400+ API calls per second. Features that pair well with Webflow include Buy Buttons, Embedded Checkout, multi-storefront management, and a GraphQL Storefront API.

Pair BigCommerce with Webflow when you want custom product displays backed by live inventory data, without rebuilding commerce infrastructure from scratch. BigCommerce handles catalog data and commerce operations, including carts and payments. On the Webflow side, you manage page layouts and content design. There's no native integration or Webflow Marketplace app, so every approach requires either embed code or developer configuration.

The BigCommerce-Webflow integration supports three approaches:

• Buy Button embeds and Code Embed elements let you place product cards and checkout paths on your pages without writing server-side code.
• Zapier automation connects BigCommerce and Webflow through trigger-action workflows for basic data syncing.
• The Webflow and BigCommerce APIs give you full control over catalog sync, inventory, and order management, but you'll need server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Add BigCommerce products with Code Embed elements

The most direct no-code method uses BigCommerce Buy Buttons pasted into a Code Embed element. A Buy Button generates an HTML snippet that adds a product card with a thumbnail and an action button. The button can link to a product detail page, add the product to your BigCommerce cart, or add it and forward the user straight to checkout. This approach suits smaller catalogs, landing pages, and single-product calls to action.

Buy Button embeds maintain live inventory sync but limit design customization compared to a full API integration. The Code Embed element supports HTML, CSS in <style> tags, and JavaScript in <script> tags. You can't run server-side languages like Perl, PHP, Python, or Ruby, and each embed has a 50,000-character limit.

To embed a Buy Button:

1. In BigCommerce, go to Channels > + Create Channel, scroll down, and click Connect next to Buy Buttons.
2. Go to Products, locate your product, and select Create Buy Button from the action menu.
3. Copy the generated HTML snippet.
4. In the Designer, open the Add panel, add a Code Embed element, paste the snippet, then click Save and close.

This method supports several placement patterns:

• Individual product buy buttons on landing pages
• Shopping cart widgets
• Product collection displays via iframe
• Custom checkout redirects using cart URL parameters

For a lighter link-based approach, drop plain <a href> cart links into a Code Embed. The pattern {store-domain}/cart.php?action=add&sku=INSERT-SKU-HERE adds a product to the cart, and action=buy adds it and sends the visitor to checkout. These links work without any JavaScript.

Show live products with CMS-driven embeds

You can replace a static product ID in a Buy Button snippet with a Webflow CMS Collection field. This lets you build one product template and populate a Collection List with per-product buttons. The pattern matches the documented approach for Shopify Buy Buttons and Eventbrite widgets, applied to BigCommerce snippets.

To bind a Buy Button to CMS data:

1. Create a CMS collection with a field storing each BigCommerce product ID or SKU.
2. Add a Code Embed element inside a Collection List that binds to that collection.
3. Paste the Buy Button snippet and replace the static product ID with the Collection field value.

CMS embeds using Ecommerce fields won't update based on the variant a visitor selects. Plan CMS capacity accordingly: the CMS plan supports up to 2,000 items per collection and the Business plan supports up to 10,000 items per collection.

Embed a BigCommerce checkout

Embedded Checkout uses an HTML <iframe> to display BigCommerce's PCI-compliant Optimized One-Page Checkout on a non-BigCommerce page. This keeps checkout on BigCommerce's domain and minimizes your PCI scope. Paste the iframe code into a Code Embed element the same way you'd add a Buy Button.

If your channel site doesn't match the URL from which you make the request to BigCommerce, you'll hit a security error and the checkout won't load. The checkout page must also be served from the same domain as the BigCommerce storefront for Safari browser compatibility. Review the Embedded Checkout docs before wiring this up, because domain configuration is the most common failure point.

Connect with Zapier

Zapier provides a direct BigCommerce and Webflow integration if you want data syncing without custom code. It connects the two platforms through trigger-action workflows, so a form submission or a catalog change on one side updates the other. This suits basic catalog sync and order routing when near-real-time accuracy is acceptable.

Verified workflows include the following triggers and actions:

• Webflow form submission → create a new BigCommerce order
• BigCommerce event (new order placed or product updated) → update a Webflow CMS item

BigCommerce orders may take up to 30 minutes to appear in connected systems, and typically only orders with a "Captured" payment status trigger workflows.

Build with the Webflow and BigCommerce APIs

For real-time catalog and order workflows, including inventory updates, connect the two platforms through their APIs. You'll need server-side development for this path. The BigCommerce REST Management API isn't designed for direct browser calls. A full headless build from a Webflow-hosted site needs a server-side proxy or serverless function on Vercel, Cloudflare Workers, or AWS Lambda. That layer handles authentication tokens and CORS for API calls that a Code Embed can't make.

The available APIs handle distinct jobs:

• The BigCommerce Catalog API reads and writes products at /v3/catalog/products
• The BigCommerce GraphQL Storefront API queries product details, pricing, images, and variants in a single request
• The Data API manages CMS collections and items
• BigCommerce webhooks and Webflow webhooks trigger real-time events between systems

Publishing CMS items via the Data API is limited to roughly one item per minute, which prevents real-time inventory accuracy for large catalogs. If you need live stock display, render from the GraphQL Storefront API client-side rather than syncing into the CMS.

Sync the product catalog into Webflow CMS

This pattern displays BigCommerce products on your pages by mirroring the catalog into CMS collections. Fetch products from BigCommerce, then create or update matching CMS items. BigCommerce webhooks keep the mirror current by signaling when products change.

To build the sync:

1. Register a webhook with POST /v3/hooks, subscribing to store/product/created, store/product/updated, and store/product/deleted.
2. When a webhook fires, read the data.id field. Payloads carry IDs only, not full product data.
3. Call GET /v3/catalog/products/{id} to fetch the full product object.
4. Write it to the CMS with POST /v2/collections/{collection_id}/items (up to 100 items per request) or update with PATCH /v2/collections/{collection_id}/items/{item_id}.

Verify every incoming Webflow webhook using the x-webflow-timestamp and x-webflow-signature headers. Note that store/product/updated doesn't fire for variant changes, so subscribe to store/sku/updated for those.

Sync inventory levels

Inventory sync keeps your CMS stock data aligned with BigCommerce. Base product changes and variant changes fire different webhooks, so subscribe to the ones that match how your catalog tracks stock.

To keep inventory current:

1. Subscribe to store/product/inventory/updated for base product stock and store/sku/inventory/updated for variant-level stock.
2. Read the inventory object. The method field reads "absolute" for API or control panel edits and "relative" for order-driven changes; value is negative for decreases.
3. Update the CMS with PATCH /v2/collections/{sku_collection_id}/items/{sku_id}/inventory.

Because CMS publishing caps at about one item per minute, this sync updates with delay. For flash sales or live stock counters, query BigCommerce directly on the client instead.

Route orders between systems

Order sync connects checkout events to downstream systems. BigCommerce order webhooks report creation, status changes, refunds, and shipments. Webflow Ecommerce, if you're running it, emits ecomm_new_order and ecomm_order_changed.

To handle orders:

1. Subscribe to store/order/created and store/order/statusUpdated in BigCommerce.
2. On store/order/statusUpdated, read previous_status_id and new_status_id to detect fulfillment changes.
3. Fetch full order detail with GET /v2/orders/{order_id} and route it to your fulfillment or notification logic.

Webhook subscriptions deactivate after 90 days of inactivity or 48 hours of failed delivery, so monitor store/hook/deliveryException and re-register as needed.

What can you build with the BigCommerce Webflow integration?

Integrating BigCommerce with Webflow lets you build branded, content-heavy storefronts backed by real commerce infrastructure without rebuilding catalog, cart, and checkout logic yourself.

• Product landing pages with buy buttons: Drop a Buy Button into a Code Embed to build a campaign page that adds a single product to the cart and forwards to checkout, with live inventory sync from BigCommerce.
• Headless catalog storefront: Mirror the BigCommerce catalog into CMS collections and render a fully designed product grid, using webhooks to keep product data current across hundreds of items.
• B2B wholesale portal: Build password-protected sections for wholesale buyers while BigCommerce handles customer-specific pricing, bulk ordering, and quote management natively.
• Animation-driven fashion lookbook: Use interactions and animations for an editorial lookbook where each featured item embeds a BigCommerce buy button, backed by a large SKU and variant catalog.

If you need more control over real-time inventory or fully custom checkout flows, the API integration path covers those cases with full flexibility.