Smootify

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