Move a site from 1.x

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.

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

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

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

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:

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

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

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.

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.

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.

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 lists them. The full list of removed elements is in removed elements.

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.
• 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.
• 1.x hooks. window._metafieldsDefsFilter and window._filterDraftOrderData still work and are deprecated: the filters of Smootify.addFilter replace them, see 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 or What 2.0 fixes 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