Install Smootify 2.0

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.

1. Paste the loader in the head code

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

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

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:

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

<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.
• newCustomerAccountsPublicKey: needed for login and the account pages. See Customer accounts.
• analytics: the tracking pixels Smootify loads with the visitor’s consent. See Analytics and pixels.

Every option, with its default, is in the options reference. For your own scripts that use Smootify, see Run your scripts with Smootify.

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:

<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.

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.

Where people get stuck

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.