# Quick start

> The whole path from a Shopify store to a published Webflow store with Smootify 2.0, one step at a time, with a link to the page that covers each step.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/getting-started/quick-start  
URL: https://www.smootify.io/docs/start/quick-start  
Updated: 2026-10-12

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.

> [!NOTE]
> Smootify 2.0 is in public beta: the `latest` channel of the loader loads the current beta release, and moves to the stable release with the same line. See [Install Smootify 2.0](https://www.smootify.io/docs/start/install).

You need three accounts:

- **Shopify**, on the Basic plan or higher. The Starter plan cannot use Shopify's Headless channel.
- **Webflow**, with a site plan that includes the CMS. You do not need a Webflow Ecommerce plan.
- **Smootify**. The Free plan works on your `.webflow.io` address. A custom domain needs the Lite or Server plan.

## 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](https://www.smootify.io/docs/start/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](https://www.smootify.io/docs/start/webflow-project) and [Starter and templates](https://www.smootify.io/docs/start/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](https://www.smootify.io/docs/start/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](https://www.smootify.io/docs/start/cms).

**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:

```html
<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](https://www.smootify.io/docs/start/install).

## 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:

```html
<smootify-product data-id="{Shopify ID}">
  <h1 product="title">{Name}</h1>
  <smootify-price><div data-prop="price">{Price Formatted}</div></smootify-price>
</smootify-product>
```

Then build the rest, in any order:

- [The product page](https://www.smootify.io/docs/build/product-page), with options and the add-to-cart form;
- [The collection page](https://www.smootify.io/docs/build/collection-page) and [product cards](https://www.smootify.io/docs/build/product-cards);
- [The cart](https://www.smootify.io/docs/build/cart) and [the navbar](https://www.smootify.io/docs/build/navbar);
- [Filters and sorting](https://www.smootify.io/docs/build/filters) and [search](https://www.smootify.io/docs/build/predictive-search);
- [Customer accounts](https://www.smootify.io/docs/build/account), 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](https://www.smootify.io/docs/start/debugger).

When the store works there, go through [Before you publish](https://www.smootify.io/docs/start/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](https://www.smootify.io/docs/features/theme-apps).

## 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](https://www.smootify.io/contact).

## Where people get stuck

> [!STUCK]
> - **The banner "Project not Connected".** The Webflow site is not connected in the Smootify dashboard, or it is a copy of the connected site. Connect this site.
> - **The banner "To connect your custom domain … you need an active Smootify Plan".** The project has no paid plan, or the domain is missing from the project settings.
> - **Products are missing after the sync.** They are not published to the Headless channel, or not available in your markets.
> - **Customers get no order confirmation email.** The project still uses the test token the Smootify app created. Replace it with the token of a Headless storefront.
> - **Links in the cart or the search results open a 404 page.** The URL of the Products collection is not `products`. Set `productsBase` to it, as [CMS collections and sync](https://www.smootify.io/docs/start/cms) explains.