Shopify

Webflow gives you full design control but lacks the commerce infrastructure growing businesses need — multi-gateway payments, abandoned cart recovery, subscriptions, and warehouse-level inventory tracking.

Connecting Shopify with Webflow separates the storefront from the transaction layer: Webflow handles design and content while Shopify manages products, inventory, checkout, and fulfillment. Designers control every pixel while the commerce team keeps selling.

This integration suits DTC founders who've outgrown standard Shopify themes, Webflow agencies adding e-commerce as a service, e-commerce managers separating design from operations, and developers building headless storefronts.

How to integrate Shopify with Webflow

What is Shopify? Shopify is a SaaS e-commerce platform that handles product management, payments, inventory, shipping, and order fulfillment for online and in-person sales. It supports over 100 payment gateways, offers a GraphQL Storefront API for headless commerce, and provides a hosted checkout certified at PCI DSS Level 1.

Teams pair Webflow and Shopify when they want design freedom for their storefront without giving up Shopify's commerce reliability. A fashion brand might use Webflow to build editorial-style product pages while Shopify tracks inventory across multiple warehouses and processes payments. An agency might design campaign landing pages in Webflow and embed Shopify checkout for a product launch.

The Shopify-Webflow integration supports 4 approaches:

• Shopify Buy Button embeds let you add product purchase buttons and carts to any Webflow page using a Code Embed element.
• Third-party Webflow apps like Shopyflow, Looop, and Smootify sync Shopify product data into Webflow CMS collections and add cart functionality without custom code.
• Zapier, Make, and viaSocket automate data flow between Shopify events and Webflow CMS items through trigger-action workflows.
• The Webflow and Shopify APIs give you full control over product sync, cart management, and checkout redirects, but require server-side development.

Most implementations combine two or more of these methods depending on catalog size and how much design control the team needs. That mix is what makes the integration flexible across simple and advanced storefront builds.

Embed Shopify Buy Buttons with Code Embed elements

The Shopify Buy Button is the simplest way to sell Shopify products on a Webflow site. It generates an embed code snippet that renders a purchase button, product details, and a shopping cart widget directly on the page. The Buy Button channel is included in all Shopify plans, and setup requires no coding beyond a copy-paste step. You need a Webflow site plan that supports custom code — the CMS plan ($23/month) or higher — to add the embed. This method works well for adding a few products to an existing Webflow site like a blog, portfolio, or landing page.

To create and embed a Buy Button:

1. In Shopify admin, go to Settings > Sales channels and install the Buy Button channel from the Shopify App Store (or install directly from apps.shopify.com/buy-button).
2. Go to Sales channels > Buy Button > Create a Buy Button, then select Product Buy Button or Collection Buy Button.
3. Choose a product or collection, customize the button appearance (color, layout, checkout action), and click Next > Copy code.
4. In Webflow, drag a Code Embed element onto the page where the button should appear.
5. Paste the Shopify embed code into the Code Embed element, save, and publish the site.

This setup gives you the fastest path from Shopify product to live Webflow page.

The Buy Button supports several configurations:

• Product buttons for individual items with Add to Cart, Direct Checkout, or Open Details actions
• Collection buttons that display a grid of products from a Shopify collection
• A built-in cart widget that opens when items are added

Code Embed elements do not render inside Webflow — the button only appears on the published site. The Buy Button also renders inside an iframe, so it cannot inherit your Webflow CSS or design tokens. If you need to change the button's appearance after embedding, you must create a new button in Shopify and replace the embed code.

Scale Buy Buttons across pages with Webflow CMS

For sites with many products, manually embedding a unique Buy Button on each page does not scale. A better approach uses Webflow CMS to store Shopify product IDs, then dynamically renders the correct button per product page. This requires a Webflow CMS site plan or higher because dynamic Code Embed elements need CMS field binding.

To set up dynamic Buy Buttons:

1. Create a CMS Collection in Webflow with fields for product name, price, description, image, and a plain text field called "Product ID."
2. In Shopify, generate a Buy Button for each product and open the embed code in a text editor. Locate the product ID value inside the script.
3. Add a CMS item for each product and paste the corresponding Shopify product ID into the plain text field.
4. On the CMS Collection template page, add a Code Embed element. Inside it, write the Buy Button initialization script but replace the hardcoded product ID with a CMS field reference.
5. Publish the site.

This approach turns a one-off embed workflow into a reusable CMS pattern.

Without binding the product ID dynamically, every Buy Button on the page points to the same product. Webflow's CMS item limits are plan-dependent, with add-ons of +5,000 or +10,000 items available on the Business plan, so this approach covers most catalog sizes. For catalogs that need richer functionality — variant selectors, auto-syncing, or custom carts — a third-party app is a better fit.

Use site-wide custom code for multi-page embeds

When a Buy Button appears on multiple static pages (not CMS-driven), loading the Shopify script once site-wide avoids duplication. Webflow supports three injection points for custom code in head and body tags.

To split the embed across injection points:

1. Open your Webflow site settings, go to the Custom Code tab, and paste the Buy Button <script> element into the Head code section. This loads the Shopify JavaScript library on every page.
2. On each product page, add a Code Embed element containing only the placement <div> with the product-specific ID.
3. Publish the site.

This keeps the shared script centralized while leaving each page-specific placement lightweight.

This approach reduces script loading overhead when Buy Buttons appear across many pages. Each embed area supports up to 50,000 characters of inline code. For larger scripts, host the file externally and reference it with a <script src="..."> tag.

Sync products with third-party Webflow apps

No official Shopify-built app exists on the Webflow Marketplace. Instead, three third-party apps bridge Shopify and Webflow by syncing product data into Webflow CMS collections and adding cart functionality to Webflow pages. These apps handle what the Buy Button cannot — automatic product sync, variant selectors, customer account pages, and real-time inventory display. They work well for teams that want a full headless storefront without writing custom API code.

Shopyflow

Shopyflow is the most installed Shopify-Webflow bridge app, with over 5,000 installs. It auto-syncs products, variants, collections, tags, vendors, product types, and metafields from Shopify into Webflow CMS collections. Shopyflow uses sf- prefixed custom attributes on Webflow elements to connect cart behavior, variant selectors, and checkout redirects.

To set up Shopyflow:

1. Install the Shopyflow Shopify app through Shopify admin.
2. Authorize your Webflow site in the Shopyflow dashboard.
3. Install the Shopyflow Webflow app from the Webflow Marketplace listing. This auto-injects the required scripts.
4. Import Shopify product data into Webflow CMS collections from the Shopyflow dashboard.

This setup covers the standard no-code implementation path.

Standard setup is no-code. Advanced features like custom cart behavior using the window.Shopyflow JavaScript API or webhook routing to external systems require developer resources.

Looop

Looop syncs products, variants, collections, and store policies between Shopify and Webflow. It includes a Webflow app for adding custom attributes and supports real-time inventory sync on its paid plan. Looop has over 100 installs and offers a free tier for basic syncing.

To set up Looop:

1. Install the Looop Shopify app from the Shopify App Store.
2. Connect your Webflow site through the Looop dashboard.
3. Install the Looop Webflow app to add attributes directly in Webflow.
4. Sync Shopify data and configure product display elements.

This gives teams a lighter-weight bridge with optional paid upgrades for more advanced commerce behavior.

The free plan includes basic syncing and Looop branding. The Looop+ plan adds custom domain support, live inventory tracking, Shopify checkout integration, and removes Looop branding.

Smootify

Smootify provides 150+ pre-made Webflow components and auto-syncs Shopify data with Webflow CMS. It focuses on giving designers a component library for building headless Shopify storefronts entirely within Webflow.

To set up Smootify:

1. Install the Smootify Shopify app from the Shopify App Store.
2. Connect your Webflow site in the Smootify dashboard.
3. Install the Smootify Webflow app from the Webflow Marketplace.
4. Use Smootify's component library to build product pages, then enable CMS auto-sync.

This approach is most appealing when the component library is a major part of the workflow.

CMS auto-sync requires a server plan. All three apps serve the same core purpose — bridging Shopify commerce data into Webflow's design environment — but differ in component libraries, sync granularity, and pricing.

Connect with Zapier, Make, or viaSocket

Automation platforms create event-driven workflows between Shopify and Webflow without custom code. These work well for syncing order data, creating CMS items from new Shopify products, or piping Webflow form submissions to Shopify as customer records. Three platforms support a direct Webflow-Shopify connection.

Zapier connects Shopify triggers to Webflow actions through pre-built templates:

• New Shopify Product → Create Webflow CMS Item
• Shopify Order Updated → Update Webflow CMS Collection Item
• Webflow Form Submission → Create Shopify Customer
• Shopify Inventory Level Updated → Update Webflow Inventory Display

These templates make Zapier useful for common event-to-action workflows.

Make supports direct Webflow-Shopify workflows such as:

• Shopify Product Updated → Update Webflow CMS Item
• Webflow Form Submission → Create Shopify Customer
• Webflow event → Adjust Shopify inventory levels
• Shopify change → Sync into Webflow CMS items, products, orders, inventory, assets, and pages

This makes Make better suited to more customized automation logic while still supporting explicit Webflow-to-Shopify and Shopify-to-Webflow flows.

viaSocket provides over 20 Shopify actions including Create Customer, Create Order, Adjust Inventory Quantity, Create Fulfillment, and Delete Product. It triggers from Webflow events like New Form Submission, New Order, and Site Published.

That gives viaSocket coverage for a range of operational workflows beyond simple content sync.

Automation tools are a good fit when you need to sync data between the two platforms on a schedule or event basis but do not need real-time inventory display or custom cart behavior. For real-time requirements, the API approach below is more appropriate.

Build with the Webflow and Shopify APIs

For full headless storefronts — where Webflow serves as the frontend and CMS while Shopify handles all commerce operations — the APIs provide complete control. This path requires server-side development and a middleware layer to coordinate data between both platforms. It is the right choice for large catalogs, custom cart experiences, real-time inventory display, and any integration that goes beyond what apps and automation tools support.

The relevant APIs are:

• Shopify's Storefront API (GraphQL) handles product queries, cart management, and checkout URLs from browser-side code. It is designed for storefront traffic, though access scopes and query complexity limits still apply.
• Shopify's GraphQL Admin API handles server-side operations like webhook registration, order queries, and inventory reads
• Webflow's Data API v2 handles CMS collections, item creation, updates, and publishing
• Webflow webhooks trigger events like collection_item_created and ecomm_new_order for real-time reactions
• Shopify webhooks fire on events like products/create, products/update, inventory_levels/update, and orders/create

Together, these APIs cover the product, cart, checkout, and sync layers of a headless implementation.

Shopify's Checkout APIs were fully shut down on April 1, 2025. All new implementations must use the Cart API instead. The REST Admin API is also legacy — new integrations should use the GraphQL Admin API.

Sync Shopify products to Webflow CMS

Build-time synchronization pulls product data from Shopify and writes it into Webflow CMS collections. This produces pre-rendered HTML pages with full SEO control. Static product data (title, description, images, price) lives in the CMS, while dynamic data (live inventory, availability) gets fetched client-side at page load through the Storefront API.

To implement product sync:

1. Create a Webflow CMS collection with fields for name, slug, shopify-product-id (plain text), price (number), description (rich text), and product-image (image).
2. Generate a Shopify Storefront API access token and a Webflow API token with cms:read, cms:write, sites:read, and sites:write scopes.
3. Query Shopify's Storefront API products endpoint, paginating with hasNextPage and endCursor:

query GetProducts($first: Int!, $after: String) {
 products(first: $first, after: $after) {
   pageInfo { hasNextPage endCursor }
   nodes {
     id title handle description
     priceRange { minVariantPrice { amount currencyCode } }
     images(first: 5) { nodes { url altText } }
     variants(first: 100) {
       nodes { id title availableForSale price { amount currencyCode } }
     }
   }
 }
}



4. Map Shopify fields to Webflow fields (handle → slug, title → name, id → shopify-product-id) and POST to Webflow's bulk create endpoint in batches of up to 100 items:

POST https://api.webflow.com/v2/collections/{collection_id}/items/bulk
Authorization: Bearer {webflow_token}



5. Publish the items:

POST https://api.webflow.com/v2/collections/{collection_id}/items/publish



6. Register Shopify webhooks for products/create, products/update, and products/delete to keep the CMS in sync after the initial load.

This flow is best for catalogs where product content needs to be indexed and visually controlled in Webflow.

Webflow CMS items created or updated via staged API endpoints are not publicly visible until published. The CMS plan supports 2,000 items and the Business plan supports 10,000 items, so plan your collection structure accordingly. For large catalogs, prioritize which Shopify fields sync to the CMS versus which get fetched dynamically — Webflow collections support up to 60 fields each.

Add cart and checkout with the Storefront API

Client-side JavaScript on Webflow pages can manage a Shopify cart directly through the Storefront API. The cartCreate mutation returns a checkoutUrl that redirects buyers to Shopify's hosted checkout. Since checkout happens on Shopify's domain, the Webflow site stays outside PCI scope.

To implement cart functionality:

1. Add a Code Embed element to your Webflow page with JavaScript that calls the Storefront API. Store the cartId in localStorage to persist the cart across page loads:

const CART_KEY = 'shopify_cart_id';

async function addToCart(variantId, quantity = 1) {
 let cartId = localStorage.getItem(CART_KEY);
 if (!cartId) {
   const { data } = await shopifyFetch(`
     mutation { cartCreate(input: {}) { cart { id checkoutUrl } } }
   `);
   cartId = data.cartCreate.cart.id;
   localStorage.setItem(CART_KEY, cartId);
 }
 const { data } = await shopifyFetch(`
   mutation CartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
     cartLinesAdd(cartId: $cartId, lines: $lines) {
       cart { id checkoutUrl totalQuantity }
     }
   }
 `, { cartId, lines: [{ merchandiseId: variantId, quantity }] });
 return data.cartLinesAdd.cart;
}



2. On checkout button click, redirect to the checkoutUrl returned by the cart mutation.
3. For real-time inventory display, query the Storefront API at page load using the product handle stored in the CMS — do not store inventory counts in Webflow CMS, as they become stale immediately.

This pattern keeps cart state on the Webflow side while preserving Shopify's hosted checkout flow.

Using localStorage for the cart ID avoids cross-domain cookie issues caused by Safari ITP and Chrome third-party cookie restrictions. For expired cart tokens, implement cart recovery by creating a new cart and re-adding items.

Process Shopify webhooks into Webflow CMS

Shopify webhooks push real-time updates to a middleware endpoint when products, orders, or inventory change. The middleware verifies the payload, transforms it, and writes to the Webflow CMS API.

To implement webhook-driven sync:

1. Register a webhook using Shopify's GraphQL Admin API:

mutation {
 webhookSubscriptionCreate(
   topic: PRODUCTS_CREATE,
   webhookSubscription: {
     format: JSON,
     callbackUrl: "https://your-middleware.com/webhooks/shopify/products"
   }
 ) {
   webhookSubscription { id }
   userErrors { field message }
 }
}



2. In your middleware, verify the X-Shopify-Hmac-Sha256 header against the raw request body using your Shopify API secret. Respond with HTTP 200 immediately, then process the Webflow CMS write asynchronously. Shopify expects a response within 5 seconds and retries up to 8 times over 4 hours if it doesn't get one.
3. Use X-Shopify-Webhook-Id to deduplicate redeliveries, and X-Shopify-Triggered-At to handle out-of-order events. Shopify does not guarantee delivery order.
4. POST or PATCH the transformed data to Webflow's CMS Items endpoint, then publish.

This architecture is what keeps a headless storefront synchronized after the initial import.

Webhook-driven sync introduces eventual consistency windows between Shopify updates and Webflow content changes. Use idempotent update operations and monitor for failed writes.

What can you build with the Shopify Webflow integration?

Integrating Shopify with Webflow lets you build custom commerce experiences with full design control without rebuilding checkout, inventory, or payment infrastructure from scratch.

• Content-driven product storefronts: Build editorial-style product pages in Webflow with rich storytelling, custom layouts, and CMS-powered content while Shopify handles variant selection, cart, and checkout. Brands like Gevi Appliances and White Coco use this pattern to create brand experiences that standard Shopify themes cannot replicate.
• Campaign landing pages with embedded checkout: Design one-off landing pages for product launches, seasonal promotions, or ad campaigns in Webflow. Embed a Shopify Buy Button or Storefront API cart so visitors can purchase directly without leaving the page. A supplement brand could spin up a new landing page in hours and start taking orders the same day.
• Headless storefronts with CMS-managed catalogs: Sync your full Shopify product catalog into Webflow CMS collections and build a complete storefront — category pages, product detail pages, and Collection Lists — all visually designed in Webflow. Client-side Storefront API calls handle live inventory and cart state. Moon Valley and Innofoods run this architecture in production.
• Portfolio and agency sites with light commerce: Add a shop section to an existing Webflow portfolio, agency site, or content hub. A photographer selling prints or a design studio selling UI kits can embed Shopify checkout into specific pages without converting the entire site to an e-commerce platform.

These examples show the range from lightweight embeds to fully headless storefronts. If you need more control over product data mapping, custom cart behavior, or real-time inventory display, the API integration path covers those cases with full flexibility.