Smootify
Connect Smootify with Webflow to build custom Shopify storefronts without exporting code.
How to integrate Smootify with Webflow
Shopify themes limit design flexibility, while Webflow's native e-commerce lacks features like subscriptions, inventory management, and third-party app integrations. Smootify bridges this gap: you design in Webflow while Shopify handles commerce operations. Product updates, inventory changes, and customer data sync automatically between platforms on the Server Plan.
There are several ways to connect Smootify with your Webflow project. You can install the Smootify app for the fastest setup, copy pre-built components and embeds into your designs, or use the Smootify JavaScript API for custom implementations.
Use the Smootify app
The Smootify Webflow Marketplace app connects both platforms with minimal configuration. Install the app in Webflow, add the Smootify Shopify app to your store, and link them through the Smootify dashboard. The connection enables automatic CMS synchronization so products, collections, and customer data flow between platforms without manual updates. You'll also need to install the Shopify Headless App for order confirmation emails and customer account functionality.
The Smootify app supports the following features:
- Automatic product sync keeps Webflow CMS collections populated with current Shopify data
- Pre-configured CMS structure through starter templates includes Shopify-ready collections and page layouts
- One-click publishing deploys changes from Webflow to your live store
- Multi-currency support uses Shopify's native currency system with Webflow localization
The app requires a paid Webflow site plan for custom code functionality. Custom code features are only available on paid Site plans or paid Workspace accounts; free plans cannot implement Smootify regardless of hosting location.
Pre-built components and embeds
Smootify provides over 100 pre-made Webflow components that connect to synced Shopify data. Copy components from the Smootify library or starter project, paste them into your Webflow project, and customize styling through the interface. No coding is required for standard e-commerce functionality.
These components cover common e-commerce needs:
- Product pages display variant selectors, pricing, and add-to-cart buttons linked to Shopify inventory
- Shopping cart and mini cart components handle line items, quantities, and checkout redirects
- Customer account pages show order history, saved addresses, and profile management
- Search boxes with predictive search use Shopify's Search & Discovery app on the backend
- Wishlist functionality lets customers save products across sessions
- Newsletter forms connect to your Shopify marketing tools
Third-party Shopify app embeds require a specific workflow. Enable the app in your Shopify admin, generate embed codes through the Smootify app blocks system, then place them in Webflow using Code Embed elements.
What you can build
Smootify with Webflow lets you build custom Shopify storefronts that combine Webflow's design control with Shopify's commerce infrastructure.
- Custom jewelry storefronts: Build made-to-order product pages with variant selectors and custom property fields
- Subscription product sites: Create recurring delivery experiences using Shopify's subscription capabilities with custom-designed landing pages and account management flows
- Multi-location retail stores: Design location-aware shopping experiences with store locators and inventory displays by region
- B2B wholesale portals: Build quote request systems and custom pricing workflows using draft orders and Shopify Flow automation for wholesale customer segments
Frequently asked questions
Customer accounts require installing the Smootify Headless App in addition to the standard Smootify setup. This enables order confirmation emails and customer account activation. The setup guide walks through configuration with screenshots and covers the public key settings needed for customer registration flows. Once configured, use Smootify's pre-built account components for order history, address management, and profile editing.
Backend Shopify apps for inventory, fulfillment, and analytics work automatically since they operate on Shopify's infrastructure. Frontend apps that modify storefronts require the app blocks workflow: enable the app in Shopify, generate embed codes through the Smootify dashboard, then place them in Webflow. Some apps may need custom coding for full integration. The documentation includes specific guides for Loox, Judge.me, and Klaviyo review widgets.
Checkout redirects to Shopify's hosted checkout page. You cannot fully customize the checkout experience within Webflow; brand consistency requires separate work in Shopify's checkout customization settings. This architecture provides Shopify's payment processing, fraud protection, and compliance features.
The Server Plan enables automatic CMS synchronization with Shopify through Smootify's infrastructure. Product updates, inventory changes, and new items sync automatically without manual intervention. Lower plans use the desktop app for manual sync triggers. CMS collections in Webflow automatically populate with Shopify content structure, and no API configuration is required for standard sync functionality.
Description
Smootify connects Webflow with Shopify's e-commerce backend so you can design fully custom storefronts in Webflow while using Shopify's payment processing, inventory management, and order fulfillment.
This integration page is provided for informational and convenience purposes only.
Order Desk
Connect Order Desk’s order management system with Webflow to automate order routing across print-on-demand providers, fulfillment services, and shipping carriers.
Liquiflow
Connect Liquiflow, a Webflow-to-Shopify theme converter, with Webflow to transform your visual designs into production-ready Shopify 2.0 themes using custom HTML attributes.
Amazon Seller Central
Connect Amazon Seller Central, the management hub for Amazon marketplace sellers, with Webflow to sync orders and product catalogs through automation platforms or custom API development.
Teachable
Connect Teachable's course platform with Webflow to display enrollment data, embed checkout experiences, and sync student information automatically.
BigCommerce
API-based integration provides complete control over data synchronization, user authentication, and checkout workflows that pre-built tools cannot deliver, enabling custom product displays, real-time inventory updates, and unified customer experiences across both platforms.
Woocommerce
Connect WooCommerce's powerful e-commerce capabilities with Webflow's design flexibility to create stunning online stores. Leverage WooCommerce's extensive product management, payment processing, and order fulfillment features while maintaining complete visual control through Webflow's no-code platform.
StoreRocket
Connect StoreRocket store locator software with Webflow to help customers find your physical locations using interactive maps and search filters.
Squarespace Domains
Connect Squarespace, an all-in-one website builder, with Webflow through embed codes for scheduling widgets and product displays, or custom API development for data synchronization.
SimpleFunnel
Collect one time, recurring payments and sell your product, accept payments directly into Stripe.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
