# Move a site from 1.x

> The steps to move a Webflow site from Smootify 1.x to 2.0 - customer accounts, the new script on your .webflow.io address, the options and markup to update, your own scripts, going live and going back.

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

A site on Smootify 1.x moves to 2.0 by replacing two lines of code with one. Most of the markup keeps working as it is: the elements, the attributes, the state classes and the options have the same names. A few 1.x features were removed, and a few settings must be in place. This page goes through the move in order: you switch on your `.webflow.io` address first, fix what the debugger points out, then go live.

> [!NOTE]
> This page is for a site that loads Smootify from `cdn.smootify.io/assets/latest/`. You find those lines in Webflow under **Site settings → Custom code → Head code**. A site that keeps them stays on 1.x, and nothing changes for it until you switch.

## 1. Move to the new customer accounts first

Shopify has deprecated its classic customer accounts and will remove them soon, so 2.0 works with the new customer accounts. The classic forms `login-form`, `register-form`, `recover-form`, `reset-form` and `activate-form` remove themselves from the page. If the site sells without accounts, or already uses the new ones, go to step 2.

If the store still uses the classic accounts, move it before you switch the script (Shopify asks for it anyway):

1. In Shopify, open **Settings → Customer accounts** and turn on the new customer accounts.
2. Set `newCustomerAccountsPublicKey` in `SmootifyUserOptions`, and replace the classic forms with the login of the new accounts. [Customer accounts](https://www.smootify.io/docs/build/account) shows both.

This is a setting of the whole store, so the live site changes with it. 1.x works with the new accounts too, with the same key: do this step on the live 1.x site. In 2.0, the site no longer handles the links in Shopify’s emails for classic accounts (activate the account, reset the password).

## 2. Switch on your `.webflow.io` address

Until you go live, publish every change to your `.webflow.io` address only. In Webflow’s **Publish** menu, select the `.webflow.io` address and not the custom domain. Your visitors keep the last version you published to the custom domain, with 1.x.

In **Site settings → Custom code → Head code**, find the two 1.x lines:

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

Replace them with the 2.0 loader, in the same place:

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

Keep your `SmootifyUserOptions` script where it is, before the loader. Scripts with `type="smootify-load"` stay as they are. Then publish to the `.webflow.io` address.

[Install Smootify 2.0](https://www.smootify.io/docs/start/install) explains the loader, its release channels and the stylesheet.

Then open the site on its `.webflow.io` address and press Alt+Shift+D (Option+Shift+D on a Mac) to turn on the debugger. On a phone, add `?smootify-debug` to the address. Its **Checks** tab lists what 2.0 reads differently on that page, and its **Elements** tab shows which elements run. Go through every template page: product, collection, cart, search and account. See [The debugger](https://www.smootify.io/docs/start/debugger).

> [!WARNING]
> While the `.webflow.io` address and the custom domain are published at different times, Webflow does not let the CMS sync write items: the sync reports a conflict. Keep this stage short, and run the sync once you have gone live. See [CMS collections and sync](https://www.smootify.io/docs/start/cms).

## 3. Set the options

**Product, collection and vendor URLs.** 2.0 builds its links as `/products/…`, `/collections/…` and `/vendors/…`, like Shopify. 1.x built `/product/…`, `/collection/…` and `/vendor/…`. Open a product page of your site: if its address starts with `/product/`, add the three options to your options script:

```html
<script>
  window.SmootifyUserOptions = {
    productsBase: "product",
    collectionsBase: "collection",
    vendorsBase: "vendor",
  };
</script>
```

- Each option is the URL of one template page. Set the ones whose URL is singular, and keep the others at the default.
- Add the lines to the options script the site already has. A second options script replaces the first.
- A site that already sets the three options changes nothing.

Without them, the links Smootify writes, such as those in the cart and the search results, open a 404 page.

**Customer accounts.** `newCustomerAccountsPublicKey` must be set for login and the account pages, as in step 1.

Every option is in the [options reference](https://www.smootify.io/docs/reference/options).

## 4. Update the markup

Most sites need only some of these. The debugger points out the `variation` attributes, the tax attributes, styles written for the old cookie banner class and an address form still using `territoryCode`.

### `variation` attributes

Rename every custom attribute named `variation` to `variant`, with the same value: `variation="sku"` becomes `variant="sku"`, `variation="swatch1"` becomes `variant="swatch1"`. 2.0 reads only `variant`. The debugger counts the elements left, and a click on its row scrolls the page to the first one.

Inside a swatch button, the image of the button’s variant is `option-variant="image"`. In 1.x, `variation="image"` and `variant="image"` also worked there: rename them to `option-variant="image"`.

### Cookie banner

2.0 no longer adds Shopify’s cookie banner. Build the banner in Webflow with a `smootify-consent` element, in a Component every page uses, such as the footer. Every site needs it, even one that does not sell in Europe: it shows only where consent is needed. See [Cookie consent](https://www.smootify.io/docs/features/cookie-consent). Styles written for the body class `is-shopify-cookie-banner-visible` move to `cookie-banner-visible`.

### Colour swatches

2.0 takes swatch colours and images from Shopify’s own swatches, or from the option metaobject in the product metafield `custom.options`, as 1.x did. It no longer looks colours up in all the colour patterns of the store.

Open a product with colours. If its swatches have no colour, the Color option was linked to the Color metafield after it was created, and Shopify leaves those swatches empty. Delete the option and add it again, choosing the Color metafield. This creates the variants again: note their SKUs, prices and stock first. See [Swatch colours and images](https://www.smootify.io/docs/build/swatches).

### Address forms

In the add and edit address forms, rename the country Select field from `territoryCode` to `countryCode`: its **Name** setting in Webflow. Shopify has deprecated `territoryCode`, and without a `countryCode` Select field the form removes itself. See [Addresses](https://www.smootify.io/docs/build/addresses).

### Loading placeholders

1.x made every text, image and button shimmer until the product loaded. In 2.0, only elements with a `skeleton` attribute shimmer. Add `skeleton="text"`, `"button"`, `"block"`, `"image"` or `"hide"` where you want a placeholder. See [loading](https://www.smootify.io/docs/reference/attributes/loading).

### Upload fields (server plan)

1.x built upload fields with FilePond and its own look. 2.0 uses the elements you design, with the `upload` parts. Styles written for the `.filepond--…` classes no longer apply: see [File uploads](https://www.smootify.io/docs/features/file-uploads).

### Everything else

A few elements must sit in a different place, a few search widgets read fewer settings, and some values look different. [What changes for your site](https://www.smootify.io/docs/start/changes) lists them. The full list of removed elements is in [removed elements](https://www.smootify.io/docs/reference/elements/removed).

## 5. Update your own scripts

This step is for custom code that uses Smootify. Pass it to whoever wrote the code.

- **What scripts can use.** `window.Smootify`, its documented methods, the documented element methods and the `smootify:*` events. `Smootify.store` and module imports are gone.
- **Waiting for Smootify.** Code that uses Smootify goes in a `window.Smootify.push` function. A third-party snippet that calls the cart (`/cart.js`, `/cart/add.js`) or wraps `fetch` goes in a `<script type="smootify-load">`: a plain script at the end of the page runs before Smootify. See [Run your scripts with Smootify](https://www.smootify.io/docs/developers/scripts).
- **Events.** Each event fires once per thing that happened. Code that counted events to know when loading ends should listen to `smootify:loaded`. See [Events](https://www.smootify.io/docs/developers/events).
- **1.x hooks.** `window._metafieldsDefsFilter` and `window._filterDraftOrderData` still work and are deprecated: the filters of `Smootify.addFilter` replace them, see [Filters](https://www.smootify.io/docs/developers/filters). `window.smootifyAddOnsBox` still works too, and `window.smootifyAddonsBox` replaces it.

## 6. Check the site

On the `.webflow.io` address, go through:

- a product page: options, prices, add to cart, buy now;
- a collection or search page: filters, sorting, pagination;
- the cart: quantities, discount codes, checkout;
- login and the account pages;
- pages with your own scripts;
- if you sell through social media, a product link opened from Instagram on an iPhone.

The debugger’s **Checks** tab should list no error and no warning on each template page. What behaves differently from 1.x and is not listed in [What changes for your site](https://www.smootify.io/docs/start/changes) or [What 2.0 fixes](https://www.smootify.io/docs/start/whats-fixed) is a bug: report it to Smootify with the page address.

## 7. Go live

Publish to the custom domain. Visitors keep their cart and their login: 2.0 reads what 1.x saved in the browser. Then run the CMS sync, so that it catches up with the changes made in Shopify while the two addresses were apart.

## Going back to 1.x

Put the two 1.x lines back in place of the loader, and publish. 1.x stays at `assets/latest/`, and carts and logins are kept in this direction too. The renamed `variant` attributes, the URL options and the new customer accounts can stay: 1.x reads them too.

## Where people get stuck

> [!STUCK]
> - **Links to products open a 404 page.** The template pages keep the 1.x URLs. Set `productsBase`, `collectionsBase` and `vendorsBase`, as in step 3.
> - **The login and register forms disappear.** They are the classic forms, which 2.0 removes. Move to the new customer accounts, as in step 1.
> - **Variant values such as the SKU keep their placeholder text.** The attribute is still `variation`. Rename it to `variant`.
> - **Nothing shimmers while the page loads.** 2.0 has no automatic placeholders. Add a `skeleton` attribute where you want one.
> - **A third-party app stops working.** Its snippet runs before Smootify. Change its script type to `smootify-load`.
> - **The CMS sync reports a conflict.** The `.webflow.io` address and the custom domain were published at different times. Go live, or publish both, and run the sync again.
> - **The debugger does not appear.** It exists on `.webflow.io` only, and stays off until you press `kbd:Alt+Shift+D`.