Smootify

Webflow builds and hosts your storefront design. Shopify holds the product catalog, variants, inventory, checkout, and customer accounts, and Webflow has no native connection to that back end. Pairing the two used to mean dropping in a Shopify Buy Button and living with whatever markup it rendered.

Smootify closes that gap by turning a Webflow site into a headless Shopify storefront. Product data, carts, search, and customer account pages render inside Webflow through pre-made components and custom attributes, while checkout stays on Shopify. No payment data reaches your Webflow site, so PCI scope stays with Shopify.

The integration fits designers and agencies building client stores where the front end has to match a brand no Shopify theme covers. Teams also reach for it when they want Shopify's back end without maintaining a Shopify theme at all. Smootify won Tech Partner of the Year at the Webflow Awards 2025.

How to integrate Smootify with Webflow

What is Smootify? Smootify is a tool for building headless Shopify stores in Webflow, made by Eclipse SRL. It imports Shopify products, collections, and vendors into the Webflow CMS, then fetches prices, media, variants, metafields, and inventory live from the Shopify Storefront API on every page load. It ships with pre-made component libraries covering product pages, carts, search, wishlists, and customer accounts.

This pairing works when a client needs Shopify checkout, inventory, and subscription support behind a front end a Shopify theme cannot produce. Smootify's own quick start guide recommends the setup for most e-commerce projects, and it advises against catalogs above 3,000 products or projects that lean on third-party Shopify apps touching the frontend. Read those two exclusions before you scope the build, because both are hard to retrofit.

The Smootify and Webflow integration supports three approaches:

• The Smootify app connects your Shopify store and drops in pre-made components without writing code.
• Custom elements and attributes bind Shopify data such as prices and stock to your own Webflow layouts, down to variant-level values.
• The Webflow Data API and Smootify JavaScript API give you full control over sync and storefront behavior, at the cost of development work.

Most implementations combine two or more of these, depending on how much of the storefront has to be custom.

Install the Smootify app

The Smootify app on the Webflow Marketplace is the no-code path, and Smootify also lists a Shopify App Store install as its fastest route; both land in the same dashboard. You need a Shopify plan, which Smootify recommends starting at Basic, plus a paid Webflow site plan, because Smootify loads its scripts through custom code in head and body tags. Since the sync writes Shopify products into CMS Collections, the Premium site plan is the practical floor: it carries the CMS with 20,000 items. You do not need a Webflow Ecommerce plan, because checkout never runs in Webflow.

To set up the integration:

1. Install the app from the Webflow Marketplace or the Apps panel in Webflow.
2. Log in or create an account in the Smootify dashboard.
3. Install the Smootify Shopify app and connect your Shopify store.
4. Copy the script from the Smootify Scripts panel and paste it into Site settings > Custom code > Head code.
5. Add your domain in Smootify's Site Settings panel, starting with the webflow.io staging domain before you move to a custom domain.

If you start from Smootify's Starter Project v2, the scripts and Shopify-ready CMS Collections come pre-installed, so you skip step 4. Once the store is connected, the app gives you:

• Pre-made components: Product pages, carts, search, wishlists, and customer account pages drop in as Webflow components you can restyle with your own classes.
• CMS import and sync: Products, collections, and vendors land in CMS Collections, synced manually through the free desktop app on the Free and Lite plans, or automatically by webhook on the Server plan.
• Ready-made pages: Templates for the cart, search, product, and customer account pages arrive with a style guide of pre-built classes, so the first store does not start from a blank canvas.
• Live Shopify data: Prices, media, variants, metafields, and inventory come from the Storefront API at runtime instead of sitting in Webflow, so stock and pricing never go stale between syncs.

Before launch, install the Shopify Headless app as a sales channel and swap in a production Storefront API token. Skip it and you stay on the development token Smootify generates at install, which does not send order confirmation notifications or attribute sales to a channel.

Add Smootify custom elements and attributes

Most Smootify components are standard Webflow Custom Elements carrying custom attributes, so you build product pages with the same tools as the rest of the site. Custom Elements sit in the Add panel under Advanced, and you set attributes in the element settings panel without writing code. For snippets that go past what attributes cover, use a Code Embed element. One constraint applies from the first click: binding CMS data to custom attributes only works on Collection pages or inside a Collection List, so settle the page structure before you start styling.

Display product data with the smootify-product element

The smootify-product custom element is the container for product data, and everything inside it pulls from the Shopify Storefront API at runtime.

To display a product:

1. Add a Custom Element from the Add panel > Advanced section and set its tag to smootify-product.
2. Add a data-id attribute bound to the Shopify ID field from the Webflow CMS.
3. Add attributes such as product="title", product="description", or product="vendor" to child elements.
4. For prices, add a smootify-price element with children carrying data-prop set to price or compareAtPrice.

Variant-level attributes such as variant="sku", variant="stock", and variant="barcode" follow the same pattern, documented in Smootify's elements and attributes reference.

Build the add to cart form

The Add to Cart element wraps a native Webflow form, so it inherits form validation, accessibility, and Webflow's own error states.

To build it:

1. Place a Webflow form inside the Add to Cart Custom Element, within smootify-product.
2. Add variant selectors with a data-option attribute set to 1, 2, or 3, displayed as a select, dropdown, or swatches.
3. Add a quantity-input element with nested minus and plus buttons carrying data-action.
4. Add hidden line-item properties by prefixing an input's name with an underscore, which keeps them out of the cart and checkout view.

Design all three option sets even when a product uses only one, because Smootify maps selectors by index rather than by name. Shopify variants never sync into the Webflow CMS, so nothing renders on the canvas and you have to test variant behavior on a published URL.

Set up the cart page

The cart component is a Custom Element with the tag smootify-cart wrapping a Webflow form, where the form's Success State doubles as the empty-cart state and the form button is the checkout button.

To set up the cart:

1. Add a Custom Element with the tag smootify-cart and place a Webflow form inside it.
2. Style the form's Success State, since Smootify shows it whenever the cart is empty.
3. Add a cart-item element for line items; Smootify replicates it for each unique variant and property combination.
4. Name the coupon and gift card inputs exactly coupon and gift-card.

Copying and pasting a form in Webflow renames its fields automatically, which silently breaks coupon inputs, so recheck names after every duplicate. The cart cookie is only shared when domain authority matches between the Webflow and Shopify domains, so the cart will not render correctly on a webflow.io staging domain.

Build with the Webflow Data API and Smootify JavaScript API

Smootify's public API surface is a browser-side JavaScript API that wraps Shopify's Storefront GraphQL API, while server-side work runs through the Webflow Data API and Shopify webhooks. This path is for developers adding storefront logic or sync pipelines the app does not cover.

• Smootify JavaScript API: The browser-side API handles cart actions, coupon codes, customer data, and raw Storefront GraphQL queries.
• Webflow CMS endpoints: Staged item endpoints write and then publish Collection Items, and the live item endpoints skip staging and go straight to the published site.
• Webflow webhooks: Site-level webhooks fire events such as collection_item_created and collection_item_published to your own systems.
• Shopify webhooks: Product webhook topics such as products/create and products/update tell your pipeline when the catalog changes.

Combine the browser API for storefront behavior with the server APIs for data pipelines.

Extend the storefront with the Smootify JavaScript API

Smootify exposes its instance only after the smootify:loaded event fires, so any call that runs earlier fails. Wrap every call in the listener:

document.addEventListener('smootify:loaded', () => {
  Smootify.applyCouponCode('WELCOME10');
});

From there, four groups of methods cover most custom work:

• Cart writes: Smootify.addToCart(lines, goToCheckout?) adds line items and re-renders the cart, and Smootify.clearCart() empties it.
• Cart identity: Smootify.getCartID() returns the current cart ID, which is what you attach to analytics or abandoned-cart tooling.
• Discounts: Smootify.applyCouponCode() applies a code without the shopper ever touching the coupon field.
• Raw Shopify queries: Smootify.query(query, variables) reaches the whole Storefront GraphQL API, and Smootify.queryCustomer(fields) reads fields for the logged-in customer.

Smootify also fires client-side events such as smootify:cart_updated and smootify:added_to_cart that you can hook for analytics or custom interface updates.

Build a custom sync pipeline with webhooks

For pipelines the built-in sync does not cover, pair Shopify's product webhook topics with the Webflow Data API v2 at https://api.webflow.com. Smootify's Server plan already consumes Shopify's webhooks internally, so this only makes sense when the mapping needs code.

To implement a sync:

1. Subscribe to Shopify's products/create, products/update, and products/delete topics.
2. On each event, write items with POST /v2/collections/{collection_id}/items or update them with PATCH /v2/collections/{collection_id}/items.
3. Push staged changes live with POST /v2/collections/{collection_id}/items/publish, or bypass staging with POST /v2/collections/{collection_id}/items/live.
4. Register your own listener with POST /v2/sites/{site_id}/webhooks to catch CMS changes such as collection_item_changed.

For standard product data the Server plan's automatic sync is far less work, so reach for a custom pipeline only when you genuinely need to transform data on the way in.

What you can build with the Smootify Webflow integration

Integrating Smootify with Webflow lets you run a Shopify-powered store on a fully custom front end, with no Shopify theme and no Webflow Ecommerce plan. Four patterns come up most often:

• Product configurators with live pricing: Bind variant selectors and line-item-property inputs to your own layout so the price and stock a shopper sees update as they choose options.
• Multi-collection catalogs: Map each Shopify collection to a Webflow CMS Collection so adding a new range means adding products in Shopify rather than rebuilding pages in Webflow.
• Content-led storefronts: Publish editorial pages and landing pages in the CMS alongside product pages, then hand payment and fulfillment to Shopify at the checkout button.
• Pre-launch and limited drops: Ship the Webflow front end before the catalog is finished, then open orders through Shopify checkout the moment products go live.

If a project only needs payments rather than a full catalog, see how to set up Stripe Checkout on a Webflow site instead.

Be clear about the split before you commit. Shopify owns checkout, payments, inventory, orders, and customer accounts, while Webflow owns presentation and content. You give up native Webflow order management and design-time visibility of variants, and you take on the 3,000-product practical ceiling, a cart that needs matching domain authority, and another subscription. In exchange you get Shopify's payment coverage and subscription apps behind a front end you control completely. Once the store is live, connect the Webflow MCP server so you can manage CMS content, run content audits, and read traffic for the storefront from your own agent.