Quick start

Smootify connects a Webflow site to a Shopify store. Webflow holds the design and the pages. Shopify holds the products, the stock, the customers and the checkout. This page goes through the whole set-up in order. Each step is short and links to the page with the details.

You need three accounts:

1. Set up the Shopify store

Create the store, or a development store if you build it for a client. Then install the Smootify app from the Shopify App Store and open it from your Shopify admin. The app takes you to the Smootify dashboard, where you log in or create an account.

Before you go live, you also create a storefront in Shopify’s Headless channel and give its token to Smootify. Orders placed without it do not send the order confirmation email.

Details: Set up the Shopify store.

2. Create the Webflow site

Start from a blank site, or add Smootify to a site you already have. Do not use a Webflow Ecommerce template: Shopify sells, Webflow shows.

Details: Connect the Webflow project and Starter and templates.

3. Connect the site in the Smootify dashboard

In the dashboard, connect your Webflow site to the project: you authorize Smootify in Webflow and pick the site. The project now links one Shopify store and one Webflow site. Add your custom domain to the project when you have one. The .webflow.io address works without it.

Details: Connect the Webflow project.

4. Create the CMS collections and sync them

Create three CMS collections, Products, Collections and Vendors, with the fields Smootify fills. Smootify Studio, the desktop app, can create them for you. Then import your products from Shopify, with Smootify Studio (every plan) or the CMS sync on Smootify’s server (Server plan). The Shopify ID field is the one that matters most: it connects each page to its product.

Details: CMS collections and sync.

A store with one or a few products can skip the CMS. Give each smootify-product the product’s ID as a fixed value, such as data-id="1234567890": the number at the end of the product’s address in the Shopify admin. Each product then has a static page of its own, designed as you like.

5. Install the script

Paste one line in Webflow, under Site settings → Custom code → Head code, and publish:

<script src="https://cdn.smootify.io/assets/v2/loader.js" data-channel="latest" data-css="true"></script>

Details, options and release channels: Install Smootify 2.0.

6. Build the pages

Every Smootify part is a Webflow element with a custom attribute, or a Custom element (Add panel) with its tag set in the element settings. On the template page of Products, one smootify-product element with its data-id bound to the Shopify ID field loads the live product. Everything that shows the product goes inside it:

Then build the rest, in any order:

• The product page, with options and the add-to-cart form;
• The collection page and product cards;
• The cart and the navbar;
• Filters and sorting and search;
• Customer accounts, if the store has them.

7. Check, then publish

Publish to your .webflow.io address first. There, press Alt+⇧ Shift+D (⌥ Option+⇧ Shift+D on a Mac) to show Smootify’s debugger. Its panel lists what does not render and why: see The debugger.

When the store works there, go through Before you publish: the Headless token, the custom domain in the Smootify dashboard, a test order. Then publish to your custom domain.

When Smootify is not a fit

• A very large catalog. Synced products count against the CMS items of your Webflow site plan, for all collections together. A catalog larger than that limit cannot have one CMS page per product.
• A store that depends on many online store apps. Apps that draw on the pages of a Shopify theme, or need Shopify’s app proxy (/apps/…), do not run on a Webflow site. If the store relies on many of them, a Shopify theme fits it better. See Shopify apps on a Webflow site.

Get help

Ask on the Smootify Discord, where the team and other builders answer. Projects with a paid plan also get premium support: open a ticket from the chat in the bottom-right corner of the Smootify dashboard. See Contact.

Where people get stuck