Is there a way to integrate Webflow and Shopify without relying on Shopify for checkout, potentially using Zapier or Integromat to handle the ordering process in Webflow and the order management in Shopify?
TL;DR
- Use Webflow forms to collect order details and process payments via Stripe or PayPal.
- Use Zapier or Make to send form data to Shopify via its Admin API, creating marked-as-paid orders.
You can integrate Webflow and Shopify without using Shopify's checkout by using tools like Zapier or Make (formerly Integromat) to sync order data. However, this setup requires custom logic for payments and is limited by Shopify’s API and Webflow’s form capabilities.
1. Understand the Constraints
- Webflow’s native checkout only works with Webflow Ecommerce products.
- Shopify’s checkout is proprietary and secure; bypassing it removes access to built-in fraud protection, taxes, shipping calculations, and payment processing.
- Zapier/Make can push Webflow forms to Shopify, but you’d need to handle payment elsewhere (e.g., Stripe or PayPal embedded in Webflow).
2. Collect Orders in Webflow
- Use a Webflow form to collect product selections and customer information.
- Include custom fields such as product ID, quantity, variants, etc.
- Use a custom payment API integration (e.g., Stripe Checkout or PayPal smart buttons) in Webflow to handle the actual payment.
3. Process Orders with Zapier or Make
- Set up a Zap (Zapier) or Scenario (Make) to trigger when a new Webflow form submission is received.
- Use the Shopify API modules/actions to create an order in Shopify:
- Customer details (name, email, address)
- Line items (product handle/SKU, quantity)
- Mark the order as paid since payment occurred outside of Shopify
4. Shopify Requirements to Use Admin API
- You must have a Shopify app (custom or private) with admin access to create orders programmatically via the Shopify Admin API.
- Shopify API limits apply, so be mindful of call volume when scaling.
5. Consider Inventory Sync
- You’ll need additional logic to sync inventory levels from Shopify to Webflow if you're only using Webflow to display products.
- This can be done via scheduled data pulls using Make or custom scripts and Webflow CMS API updates.
6. Legal and Security Considerations
- By handling payments outside Shopify, you assume responsibility for PCI compliance.
- Make sure your custom checkout is secure and uses HTTPS, secure payment gateways, and proper data handling practices.
Summary
You can use Webflow for front-end and checkout, capture orders via forms, handle payments with Stripe or PayPal, and push orders into Shopify using Zapier or Make. This decouples Shopify's checkout but removes key benefits like integrated payment security and taxes. It’s viable for custom workflows but not recommended for high-volume or regulation-sensitive stores.
