How to start
10 simple steps to create a fully functional Shopify store entirely in Webflow in few minutes (not days!)
Add a Shopify plan for your store
Create a Shopify account and choose a plan to start your ecommerce journey. We recommend the Basic plan as a great starting point for your Smootify store.
Add a Site plan for your Webflow project
To create a Shopify store entirely within Webflow, you'll need at least the CMS Site Plan. This plan supports up to 2000 CMS items (including products, categories, and custom fields). For larger catalogs, consider upgrading to the Business Plan, which allows up to 20,000 items.
Create a Smootify account
Start with our free plan to test the app. Upgrade to Lite or Server when you're ready to launch and connect your custom domain.
Install the Shopify app
Once you log in to your Smootify account, click the Install button and select the Shopify store where you want to install the Smootify App
Once installed, launch the Smootify app from your Shopify admin panel.
You’ll be redirected to Smootify. Here, click the Add a new site button and connect the Webflow project you want to use with Shopify.
Add a Webflow project
Select the Webflow project you want to connect to Shopify. Then, click the 'Authorize app' button to grant the Smootify Webflow app permission to establish the connection. We suggest starting from our Starter Project. This is the official starter project for the Smootify Relume Library (but you can use without using the library). It includes a style guide with pre-built classes and the CMS structure ready to be synced up with Shopify. This project uses the Client-First Webflow Style System to keep your Webflow projects more organized and maintainable.
Add your project domain
Once complete, you will be redirected to the Site Settings panel. Here, you'll find the Shopify Store URL and Public Token already populated. You only need to add your project domain. You can use your staging domain (webflow.io) initially and then replace it with your custom domain when ready.
Copy and paste the Smootify JS script
Navigate to the Smootify Scripts panel and copy and paste our provided script into the global head code section of your Webflow project.
Import & sync your CMS content automatically
With our new Server Plan, you can keep Webflow and Shopify in perfect sync using the CMS Server Sync feature. If you have an active Server Plan, you'll find the CMS Server Sync option in the left sidebar. Click on it and then select 'Enable CMS Sync'.
Now, you only need to associate Products, Collections, and Vendors in your Webflow project with their corresponding Shopify counterparts (follow these steps if you haven't use our Starter Project) and then click 'Enable CMS Sync.
Choose whether to start the synchronization with webhooks only (if you've already imported products, collections, and vendors) or to perform an initial Shopify data import and then set up webhooks.
Once the synchronization is complete and enabled, you will see a confirmation message on the dashboard. You can deactivate the synchronization at any time by clicking the 'Deactivate Sync' button.
Are you a Free or Lite user?
If you have a Free or Lite plan, you can utilize our free Desktop App. After importing, remember to synchronize the platforms using this app whenever you publish a new item on Shopify and want it reflected on Webflow.
Focus on design and publish when you want
Once everything is connected, you can focus on designing and launching your store directly from the Webflow Designer. You have multiple options to create your store:
. Start from scratch: Use the Webflow App to access our ready-to-use, client-first components.
. Choose a premium template: Benefit from pre-designed pages and add-ons.
. Utilize the Relume Library: Access over 150 Relume components optimized for Shopify.
Connect domains and redirects
When you're ready to publish your store with a custom domain, remember that using the headless channel requires a separate domain for Shopify. If you connect both domains to Shopify and Webflow, checkout issues may arise because Webflow could intercept the checkout page. To avoid this, connect your main domain solely to Webflow and use a subdomain like store.domain.tld for Shopify following this guide:
Don’t forget to install the Shopify Headless App on the same store to enable customer accounts and other functionalities.
Turn your Figma to Webflow/Shopify
Turn your Figma into a pixel-perfect Webflow or Shopify website. Get an instant quote now!