# Install Smootify 2.0

> The one line that loads Smootify 2.0 on every page of your Webflow site, the release channels, the stylesheet, in-app browsers on iPhone and the options.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/start/install  
Updated: 2026-10-12

Smootify 2.0 is one line of code in the head of your Webflow site. It loads Smootify on every page, with its stylesheet. This page says where to paste it, which release it loads, and how to set Smootify’s options.

> [!NOTE]
> Before you start, your Webflow site must be connected to a project in the Smootify dashboard: see [Connect the Webflow project](https://www.smootify.io/docs/start/webflow-project). The line holds no store details: Smootify finds the project from the Webflow site itself.

## 1. Paste the loader in the head code

In Webflow, open **Site settings → Custom code** and paste this line in **Head code**:

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

Then save, and publish the site.

Paste it in the site’s head code, not in the settings of one page, so that every page loads Smootify. The cart and its count usually sit in the navbar of every page.

## 2. Choose the release (`data-channel`)

`data-channel` says which release of Smootify the site loads:

| Value | What the site gets |
|---|---|
| `latest` | the current stable release, updated as new releases come out; the loader uses it without `data-channel` |
| `beta` | the next release, before it is stable: to try it, for example on a copy of the site |
| a version, such as `2.0.3` | that release only, until you change the value; it does not get later fixes |

> [!NOTE]
> Smootify 2.0 is in public beta. For the whole beta, `latest` and `beta` load the same release: every beta release goes to both channels. Keep `latest`: when 2.0 is stable your site moves to it with the same line, and from then on `beta` is the next release again.

## 3. Keep the stylesheet (`data-css`)

`data-css="true"` adds Smootify’s stylesheet. It holds the rules that show and hide the elements with a condition, such as `condition="out-of-stock"`, and the loading placeholders set with `skeleton`. Keep it, unless you link the stylesheet yourself (see “Without the loader” below).

## 4. In-app browsers on iPhone

A visitor who opens a link from Instagram, Facebook or TikTok on an iPhone sees your site in the app’s own browser, not in Safari. The loader recognises these browsers and gives them `compat.js`, a build of Smootify in a single file. You do not add `compat.js` yourself: the loader chooses it.

`compat.js` behaves like the normal build, with three differences:

- 3D models show only their poster image;
- sliders built with `dynamic-swiper` do not slide;
- the debugger does not load.

## 5. Set Smootify’s options

Options change how Smootify behaves: the URLs of your template pages, the key for customer accounts, analytics and more. The builder asks what your site needs and writes the script:

_The options builder of this page writes the `SmootifyUserOptions` script from a few questions: open the page in a browser to use it._

Or write it yourself, in a script **before** the loader, in the same head code:

```html
<script>
  window.SmootifyUserOptions = {
    productsBase: "product",
    newCustomerAccountsPublicKey: "{Customer Account API client id}",
  };
</script>
<script src="https://cdn.smootify.io/assets/v2/loader.js" data-channel="latest" data-css="true"></script>
```

This example is for a site whose Products collection has the URL `product`, with customer accounts.

- Smootify reads the options once, when it starts. A script after the loader can come too late.
- Use **one** options script. A second one replaces the first.
- You only write the options you change. The others keep their default.

The options set-up pages need most often:

- `productsBase`, `collectionsBase`, `vendorsBase`: the URL of each template page, when a collection’s URL is not `products`, `collections` or `vendors`. See [CMS collections and sync](https://www.smootify.io/docs/start/cms).
- `newCustomerAccountsPublicKey`: needed for login and the account pages. See [Customer accounts](https://www.smootify.io/docs/build/account).
- `analytics`: the tracking pixels Smootify loads with the visitor’s consent. See [Analytics and pixels](https://www.smootify.io/docs/features/analytics).

Every option, with its default, is in the [options reference](https://www.smootify.io/docs/reference/options). For your own scripts that use Smootify, see [Run your scripts with Smootify](https://www.smootify.io/docs/developers/scripts).

## Without the loader

The loader is the way to install 2.0. If you cannot use it, these are the direct files of the stable release:

```html
<link rel="stylesheet" href="https://cdn.smootify.io/assets/v2/latest/css/index.css">
<script type="module" src="https://cdn.smootify.io/assets/v2/latest/js/index.js"></script>
```

Replace `latest` with a version, such as `2.0.3`, to fix one release. With the direct files, every browser gets the normal build: in-app browsers on iPhone do not get `compat.js`.

## Check that it runs

Publish to your `.webflow.io` address and open it. Press Alt+Shift+D (Option+Shift+D on a Mac), or on a phone add `?smootify-debug` to the address. Smootify’s debugger button, marked **Info**, appears with its panel open. The panel lists the Smootify elements on the page and what does not render: see [The debugger](https://www.smootify.io/docs/start/debugger).

On the Free plan, a “Made with Smootify” badge also shows on `.webflow.io`. A custom domain needs a paid plan and the domain in the project settings: see [Connect the Webflow project](https://www.smootify.io/docs/start/webflow-project).

## Where people get stuck

> [!STUCK]
> - **The banner "Project not Connected".** This Webflow site is not connected in the Smootify dashboard, or it is a copy of the connected site: a copy is a new site for Smootify.
> - **Every stock and sale message shows at once.** The stylesheet is missing. Add `data-css="true"` to the loader.
> - **An option does nothing.** The options script comes after the loader, or a second options script replaces it. Keep one, before the loader.
> - **A change made in the Smootify dashboard does not show.** Publish the site again, then reload the page twice. The browser keeps the previous project settings for one visit.
> - **The debugger button does not appear.** It is off until you press `kbd:Alt+Shift+D`, and it exists on `.webflow.io` only: not on your custom domain, and not in in-app browsers.

## Coming from 1.x

In 1.x, two lines loaded the script and the stylesheet from `assets/latest/`. In 2.0, the loader replaces both. Keep your options script where it is, before the loader. The full procedure is in [Move a site from 1.x](https://www.smootify.io/docs/start/migrate).