Ecwid

Embed a complete shopping cart, product catalog, and checkout on any Webflow page through a single JavaScript snippet from Ecwid. Product updates, inventory changes, and orders flow through Ecwid's admin panel and reflect on your site automatically—no republish required.

This fills the gaps in native commerce, like buy-now-pay-later options and local delivery workflows. For deeper control, Ecwid's REST API and webhooks support real-time inventory sync, automated order logging, and CMS-driven product pages.

How to integrate Ecwid with Webflow

What is Ecwid? Ecwid by Lightspeed is a multi-channel e-commerce platform built to embed a shopping cart and online store on top of an existing website. It works with over 70 payment gateways and real-time shipping rates from USPS, UPS, and FedEx. It also supports selling across Facebook, Instagram, TikTok, Amazon, eBay, and other channels through one control panel. Ecwid works with WordPress, Wix, Squarespace, and other platforms in addition to Webflow.

Pair Ecwid with your site when you need e-commerce features that the native tools don't provide, such as buy-now-pay-later payment integrations or in-store pickup and local delivery options. The integration also fits cases where a non-technical client manages their own product catalog and orders through Ecwid's admin while a web designer maintains the site separately.

Ecwid connects to your site in 3 ways:

• Code Embed elements handle store embedding, Buy Buttons, and supplementary widgets without writing code.
• Zapier, Make, and viaSocket can sync data between Ecwid and your site, such as syncing new products to CMS collections or converting form submissions into customer records.
• The Webflow and Ecwid APIs give you control over product catalog sync, real-time inventory updates, and order processing, but require server-side development.

Most implementations start with the Code Embed approach and add automation or API integrations as the project grows more complex.

Add Ecwid to Webflow with Code Embed elements

There's no Ecwid app in the Apps Marketplace. Instead, use the Code Embed element, which accepts HTML, CSS, and JavaScript. Copy a snippet from Ecwid's admin panel and paste it into a Code Embed element on any page. You need a paid site plan since free plans don't support custom code embeds. Ecwid's embed method works on all Ecwid plans, including the Starter plan.

Code Embed supports several Ecwid components:

• Full store embed with product catalog, shopping cart, and checkout
• Buy Button for a single product or compact product card
• Shopping bag widget for a standalone cart icon
• Category navigation menu widget

Start with a simple embed and expand the storefront experience as needed.

Each component uses the same embed workflow: generate a code snippet in Ecwid's admin, then paste it into a Code Embed element on your page. Product updates made in Ecwid's control panel appear on your site automatically with no republish needed.

Embed the full Ecwid store

The full store embed adds a complete product catalog, shopping cart, and checkout to a page. This is the primary integration method covered in both the Ecwid and Webflow docs.

To embed the full store:

1. Open the Ecwid admin panel and go to Sales channels.
2. Scroll to Sell on your website and click Other platforms and sitebuilders.
3. Click Copy Code to Clipboard.
4. Open your site for editing in the Designer.
5. Open the page where you want the store, or create a new page.
6. Click the + icon in the upper left corner.
7. In the opened menu, scroll to the Advanced section and select Embed.
8. Drag the Embed element to the position on the page where the store should appear.
9. In the HTML Embed Code Editor window, paste the integration code.
10. Click Save and Close.

Once you're done, publish the site so customers can visit your store and place orders.

The store displays as a blank placeholder inside the Designer canvas. Products and categories only appear after you preview or publish the site. All orders placed through the embedded store land in Ecwid's My Sales > Orders section.

Embed a Buy Button for a single product

The Buy Button embeds a customizable product card with a checkout for a single product. Layout options include a full-size card with image, description, and price, or a compact button-only version. Use it for landing pages, blog posts, or any page where you want to feature one product without loading the full catalog.

To create and embed a Buy Button:

1. In the Ecwid admin, go to Catalog > Products and select a product.
2. Click the Buy Now Button tab, then Embed Product.
3. Choose a layout (compact, button only, or full-size) and configure colors and text under Appearance.
4. Click Generate Code and copy the snippet.
5. In the Designer, drag an Embed element (found under the Advanced section) onto the target page and paste the code into the HTML Embed Code Editor.
6. Click Save and Close, then publish.

Updates to the product's price, description, or images in Ecwid automatically reflect on the Buy Button—no republish needed.

Add supplementary widgets

Ecwid provides standalone widgets for a shopping bag icon and a category navigation menu that you can embed separately on your site. Both require the full store embed code to already be present on the page.

The shopping bag widget offers multiple layout options through a data-layout parameter, including SMALL_ICON_COUNTER, MEDIUM_ICON_TITLE_COUNTER, and BIG_ICON_TITLE_SUBTOTAL. The category menu widget is responsive and adjusts to the page width automatically.

To add either widget:

1. In your Ecwid admin, go to Sales channels → Sell on your website → Other platforms and sitebuilders, then click Copy Code to Clipboard.
2. In the Designer, open the page, click the + icon, scroll to the Advanced section, drag the Embed element into place, and paste the code.
3. Publish the site.

After publishing, confirm the base store embed is on the page, since these widgets don't function independently.

Connect Ecwid and Webflow with Zapier, Make, or viaSocket

Zapier, Make, and viaSocket all offer direct connections between your site and Ecwid, so you can sync data between the two platforms without writing code.

Zapier has native apps for both Webflow and Ecwid. Build Zaps that connect Ecwid triggers to Webflow actions and vice versa. Ecwid triggers on Zapier are polling-based, so updates may take up to 15 minutes on Zapier's free plan. Webflow triggers are webhook-based and fire in real time.

Available trigger and action combinations include:

• Ecwid New Product → Webflow Create Live Item (auto-populate a CMS collection when products are added)
• Webflow New Form Submission → Ecwid Create Customer (convert lead captures to Ecwid customer records)
• Ecwid New Paid Order → Webflow Fulfill Order (trigger fulfillment when an Ecwid order is paid)
• Ecwid New Abandoned Cart → Webflow Create Item (track abandoned carts in a CMS collection for retargeting)

These pairings make Zapier a practical option for basic syncs and lead-routing workflows.

Make offers a verified Webflow app with 40 modules. The Ecwid app on Make is a community-maintained integration built by a third-party developer, not maintained by Make directly. The platform includes explicit pairings such as Ecwid Watch Orders → Webflow Create Item, Ecwid Watch Products → Webflow Create Item, and Webflow New Form Submission → Ecwid Create a Customer. The community app designation means support comes from the app developer rather than Make's team.

Choose Make only if you're comfortable using a community-maintained Ecwid app with third-party support.

viaSocket has both Webflow and Ecwid as native apps. It includes explicit pairings such as Ecwid New Order → Webflow Create Item, Ecwid Product Updated → Webflow Update Live Item, Webflow New Form Submission → Ecwid Create Customer, and Webflow New Order → Ecwid Create Order. viaSocket targets non-technical operators and uses a guided field-mapping interface.

viaSocket suits teams that want guided setup rather than custom scripting.

Build with the Webflow and Ecwid APIs

The Ecwid REST API and Data API let you manage inventory sync, CMS-driven product pages, and custom order processing pipelines. You'll need server-side development, typically using a serverless function (Vercel, AWS Lambda, or Cloudflare Worker) to handle authentication, webhook processing, and data transformation.

• The Ecwid REST API handles products, orders, customers, categories, and discount coupons. Authentication uses OAuth 2.0 Bearer tokens. API access requires Ecwid's Venture plan or higher.
• The Data API v2 handles CMS collections and items, site publishing, and custom code registration.
• Ecwid webhooks send POST requests to your endpoint when products, orders, customers, or categories change. Events include product.created, product.updated, order.created, order.updated, and others.

Never expose the Ecwid OAuth token in client-side JavaScript. Always route API calls through a server-side proxy that stores credentials in environment variables.

Sync the Ecwid product catalog to Webflow CMS

Syncing Ecwid products to CMS collections creates static, indexable product pages that load as part of the published HTML output. This resolves the SEO limitation of Ecwid's JavaScript-rendered store content, which doesn't appear in the published HTML or sitemap.

To implement an initial catalog sync:

1. Fetch products from Ecwid using GET /api/v3/{storeId}/products?offset=0&limit=100, paginating until the response count is less than 100.
2. Map Ecwid fields to CMS fields: name to plain text, description to rich text, price to number, imageUrl to image, inStock to boolean, and id to a plain text field for use as a lookup key.
3. Create items using POST /v2/collections/{collection_id}/items with up to 100 items per request.
4. Publish the staged items with POST /v2/collections/{collection_id}/items/publish.

A serverless function handles pagination and batching to stay within API request limits on both platforms. Schedule this sync on a recurring basis (daily or weekly) for ongoing catalog reconciliation.

Update inventory in real time with webhooks

Ecwid's product.updated webhook fires whenever a product's stock, price, images, or other details change. The webhook payload contains storeId, eventCreated, eventId, eventType, and entityId, but no data object for product events. You'll need a follow-up REST call to fetch the full product data.

To implement real-time inventory sync:

1. Configure a webhook endpoint that receives Ecwid's POST request, responds with HTTP 200 immediately, and queues the entityId for processing.
2. In an async worker, call GET /api/v3/{storeId}/products/{productId} to retrieve the current product data.
3. Look up the corresponding CMS item using the stored Ecwid product ID field.
4. Update the item with PATCH /v2/collections/{collection_id}/items/{item_id}/live to write the new stock and price values directly to the live site.

Ecwid retries webhook delivery when your endpoint doesn't return HTTP 200. Build your handler to be idempotent so duplicate deliveries produce the same result without side effects. Use the eventId field in the webhook payload for deduplication. Every Ecwid webhook includes an X-Ecwid-Webhook-Signature header for HMAC verification using your app's client_secret, which is a separate credential from the Bearer access token.

What can you build with the Ecwid Webflow integration?

Integrating Ecwid with your site lets you run a full e-commerce operation without migrating away from either platform.

• Portfolio site with a product shop: A photographer or artist adds a Buy Button or full store embed to an existing portfolio. Visitors browse the work and purchase prints or digital downloads without leaving the site. Product management stays in Ecwid's admin while the designer controls the layout in the Designer.
• Multi-channel retail storefront: A small business sells through their site, Facebook, Instagram, and Amazon from one Ecwid dashboard. Inventory and orders sync across all channels automatically. The site remains the brand's primary web presence while Ecwid handles the commerce infrastructure.
• SEO-optimized product catalog pages: An agency syncs Ecwid product data to a CMS collection using the API, then displays those items in a Collection List to generate static product pages with proper meta tags, structured URLs, and inclusion in the sitemap. Each CMS-driven page loads as standard HTML rather than JavaScript-rendered content, which reduces crawl latency for search engines.
• Automated inventory dashboard: A developer configures Ecwid webhooks to push stock changes to CMS items in real time. When a product sells out in Ecwid, the corresponding CMS item updates automatically or gets archived from the live site. This removes manual stock monitoring across platforms.

If you need more control over custom checkout flows, customer segmentation, or bidirectional order status tracking, the API integration path handles those cases.