Starting from Shopify App
To connect Shopify, simply install our Shopify app from the Shopify App Store. Select the Shopify store you want to connect to Webflow and click the "Install" button. You'll be automatically redirected to your store's dashboard where you'll be prompted to install the Smooify app. Click "Install." Once complete, you'll be redirected back to the Smooify dashboard where you'll be asked to connect your Webflow project.
Before connecting your Webflow site, please decide whether you want to start from a new project or an existing one.
If you're starting from scratch, we highly recommend our starter project, specifically designed for our Reume library. This empty project provides a solid foundation with a complete Webflow CMS structure and a comprehensive style guide built using Client First 2.1. Select it from our templates page and clone it into your Webflow account prior to connecting it to Smooify.
If you're using an existing Webflow project, please watch the video linked in the description to ensure your CMS structure is set up correctly before connecting it to Smooify.
Now, we can connect the newly created Webflow project to the Smooify app.
Click on the "Connect a Webflow site" button and select the starter project you just cloned in Webflow. Once selected, click the "Authorize" button in the bottom right corner of the page. Our app will automatically connect your Webflow project to your Shopify store, adding the Shopify store URL and public token storefront API. All you need to do is connect your domain.
You can use the Webflow staging domain and switch it to your official domain when you're ready to publish the project online.
Please ensure you only enter the domain without https or a trailing slash.
Go to the "Site scripts" section in Smooify and copy the JavaScript code. Paste it into the head section of your Webflow project's Global code.
In this video, we have an active server plan on our Smooify account. This allows us to automatically sync Shopify data to Webflow via server.
If you have a free or light plan, you can synchronize Shopify data to Webflow using our free desktop app by following the video linked in the description.
To initiate the initial import and automatic data synchronization, navigate to the CMS server sync section (accessible only to those with an active server plan). Click on "Enable CMS sync."
Next, we need to associate the CMS collections intended for import and synchronization from Shopify to Webflow, specifically the products collections and vendors collections. If you've utilized our starter project, you'll find these already created and appropriately configured. Once associated, click the "Enable CMS sync" button.
In this section, you need to choose whether to only synchronize Shopify data in Webflow if you've already completed the initial import of products collections and vendors, or to import and synchronize data simultaneously (recommended for the first import).
In our case, we'll choose the second option. This process may take some time, especially if you have a large number of products and collections in Shopify. However, you can leave this screen as you will be notified by email when the import is complete.
Once completed, you will see a message confirming that CMS server sync is enabled on your Webflow project. By refreshing your Webflow project, you can verify that the previously empty CMS collections are now populated with products collections and vendors from your Shopify store.
As a final step in our configuration, we need to install the official Shopify headless app. This app will be used in future videos to enable new customer account features.
To install it, simply search for it in the Shopify App Store and add it to your Shopify dashboard.