Starting from Webflow App
You can also start the Smootify configuration process directly within Webflow.
You can add the Smootify Webflow App to your project in two ways:
Install the Webflow App
From the Webflow Marketplace
From the Webflow Designer
Once launched, you’ll see a message prompting you to login or signup to Smootify. Click the “Open Dashboard” button to access the Smootify Dashboard.
If you go to the newly added site settings, you’ll see that the Shopify Store URL and Shopify Public Token are empty. To connect Shopify, simply install our Shopify App from the Shopify App Store and follow the instructions below.
Install the Shopify App
- Click on 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.
Connect to Webflow
- You’ll be redirect to the Smootify dashboard. Click the Connect your Webflow site button and connect the Webflow project you want to use with Shopify.
-
You’ll see a Webflow authorization pop-up asking you to connect the Smootify App to your Webflow project. Select the project from the list and click the “Authorize App” button in the bottom right corner to grant Smootify access. If you are starting from scratch, we suggest using 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.
-
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.
- Navigate to the Smootify Scripts panel and copy and paste our provided script into the Webflow project settings > Custom Code > Head code section.