Connect the Webflow project

A Smootify project links one Webflow site to one Shopify store. This page prepares the Webflow site, connects it in the Smootify dashboard, and explains which addresses the licence covers: your .webflow.io address and your custom domains.

1. Prepare the Webflow site

• A new site. Create a blank site in Webflow. Do not start from a Webflow Ecommerce template. You do not need Webflow Ecommerce at all: Shopify sells, Webflow shows. For a ready-made starting point, see Starter and templates.
• An existing site. It works as it is. You add the CMS collections and the script to it.

The site needs the Webflow CMS for the product pages. Products, collections and vendors are all CMS items, and your Webflow site plan limits how many items the site can have. To publish on a custom domain, the site also needs a Webflow site plan.

2. Connect the site to a project

1. Open the Smootify dashboard from the Smootify app in your Shopify admin.
2. Connect a Webflow site: Webflow asks you to authorize Smootify, and you pick the site.

You can also start from the other side: install the Smootify app from the Webflow Marketplace, open the dashboard from it, then install the Smootify app on your Shopify store.

The project now knows the store and the site. Smootify finds the project from the Webflow site itself, so the script you install holds no store details. The same access lets the CMS sync write your products into the site’s CMS.

3. Add your domain

In the project’s settings in the Smootify dashboard, add the custom domain the site is published on, such as www.example.com.

• Your .webflow.io address always works. You do not need to add it.
• www or not. For the site, example.com and www.example.com count as the same domain. The server add-ons compare the exact address, so write the domain the way the site is published, www included when it has one.
• Weglot. Language sub-domains, such as fr.example.com, are covered by the main domain.

Where the domain points, and how the checkout gets its own sub-domain: see Domains and checkout.

4. What each plan covers

• On .webflow.io, every client add-on works for testing. Magic Box is the exception: on every plan and every address, it must be turned on in the dashboard first.
• The server add-ons, such as file uploads or the product configurator, need the Server plan and must be activated for the project. On the live site they run only on the domain in the project settings. The list is in server add-ons.

When the site is not connected, or a custom domain is not covered, the page shows a banner at the bottom left and Smootify does not load the store:

5. Install the script

Paste the loader in the site’s head code and publish: see Install Smootify 2.0.

Keep the connection working

• Webflow access expires. Webflow can revoke Smootify’s access, for example when the site moves to another workspace. The CMS sync then stops. Authorize the site again from the dashboard, and pick the same site in Webflow.
• A copy of the site. A duplicated Webflow site is a new site for Smootify. It shows “Project not Connected” until you connect it to a project.
• Someone else’s project. The dashboard can share a project with another account, or transfer it: see Hand a project to a client.

Where people get stuck