What changes for your site

2.0 keeps the markup of 1.x: the elements, the attributes, the state classes and the options have the same names. This page lists the exceptions a designer can see: what was removed, what is deprecated, and what behaves differently on the page. The steps to switch a site are in Move a site from 1.x. The 1.x bugs that 2.0 corrects are in What 2.0 fixes.

Removed, and what replaces it

• Classic customer accounts. The forms login-form, register-form, recover-form, reset-form and activate-form remove themselves from the page. Shopify has deprecated its classic customer accounts and will remove them soon: 2.0 works with the new customer accounts, with the newCustomerAccountsPublicKey option and the passwordless-login element: see Customer accounts.
• The variation attribute. 1.x read variation as another name for variant. 2.0 reads only variant: rename the attribute and keep its value.
• Shopify’s cookie banner. 2.0 no longer adds it. You build the banner in Webflow with smootify-consent, in a Component every page uses, such as the footer: see Cookie consent. The body class while the banner shows is cookie-banner-visible (1.x: is-shopify-cookie-banner-visible).
• The store’s colour patterns. 1.x matched option values to every colour pattern of the store by name. 2.0 uses Shopify’s own swatches, or the option metaobject in custom.options: see Swatch colours and images.
• Automatic placeholders. 1.x made every text, image and button shimmer while a product, a search or an account list loaded. 2.0 shimmers only the elements that have a skeleton attribute: see loading.
• The FilePond upload fields (server plan). 2.0 uses the upload elements you design, with the upload parts and their classes: see File uploads.
• The redirect for missing products. 1.x sent the visitor to another page (invalidProductRedirectUrl) when the product of a product page was unpublished or not sold in the market. 2.0 never leaves the page: the product block stays empty, or is removed.
• territoryCode in address forms. Shopify has deprecated it. 2.0 reads the country Select field named countryCode: rename it, or the address form removes itself. See Addresses.

Every removed element is in removed elements.

New URL defaults

2.0 builds links like Shopify, with plural URLs:

A site whose template pages keep the singular URLs sets the options: see Move a site from 1.x.

Deprecated, still working

These keep working in 2.0. On .webflow.io, the debugger points them out.

• product="images" and product="media" as the pieces of a gallery, with offset, and the options showOnlyActiveImages and activeImagesMode. One product="gallery" element does the same, with only-variant-images and variant-images="alt" on the element: see Product gallery and media. variant="image" is not deprecated: it stays for the image of the current variant, on cards and in the cart.
• Three 1.x hooks for developers: window.smootifyAddOnsBox, window._filterDraftOrderData and window._metafieldsDefsFilter. See Filters.
• The 1.x names of the wishlist events (smootify_wishlist:…). 2.0 sends them with the new names too, smootify:wishlist:…. The debugger cannot see code that listens to events: see Events.

What behaves differently

Swatch images

The image of the variant a swatch leads to is option-variant="image". Inside a swatch button, 1.x also filled variant="image": 2.0 fills only option-variant="image".

Webflow interactions

After Smootify renders, it restarts Webflow interactions only when the render changed the page. 1.x restarted them after every render. Page-load and scroll animations that already played keep their state. To restart after every product load, as in 1.x, set webflowRestartAlways: true in the Smootify options.

Values and conditions

Some values show differently from 1.x, and some conditions match differently:

Cart

• [cart="discount"] also lists the automatic discounts of the order, after the codes. They have no remove button: Smootify removes it from them.
• button[data-is="direct-add-to-cart"] no longer closes a mini cart built with a details element. The cart stays open and shows the new line.

Search and filters

• smootify-search shows at most 10 results. A limit above 10 counts as 10.
• filter-swatches keeps its first button as the template and removes the others, a submit button too. Put the submit button outside the widget.
• filter-search reads no label, and filter-price is always the Price filter.
• filter-search shows on collection pages. 1.x hid it there with the hide-search class, because Shopify cannot search inside a collection. 2.0 searches inside the collection and no longer sets the class. A filter-search in a block shared with the collection pages now shows there too: remove it from those pages if they should not have one. See Search inside a collection.
• The search page no longer adds placeholder cards before the first search. The cards you design keep their place until the results replace them.

Other elements

• Recently viewed shows up to 10 products by default (1.x: 3). Add limit="3" to the smootify-product with data-id="last-viewed" to keep three. See Recently viewed.
• store-locator needs its map element inside. The store row and the search form are optional. It reads only its documented settings, and is removed when the store has no locations.
• product-slider: each slide it creates holds only the Collection list item.
• location-switcher: the toggle reads location="name" and location="address", like the list items. 1.x read data-prop there and left the toggle empty.
• policy works on any element, not only a Rich text, and also takes Shopify’s policy handles, such as privacy-policy.
• wishlist-toggle with data-use-variants saves the current variant. In 1.x the attribute did nothing and the toggle saved the product. Remove the attribute to keep saving the product.
• Address forms list the countries by their name in the site’s language, in alphabetical order.
• Field Names are read as you type them in Webflow. The metaobject creator and the metafields editor turn a Name such as Serial number into the key serial_number. In 1.x the Name had to be the exact key.
• Magic Box: a remove button only removes the line, and form errors go away after 5 seconds.
• Product configurator (server plan): formulas also accept plain names, such as price + length * 2, besides the 1.x brackets. A field with no value counts as 0.

Apps

A Shopify theme app that calls /apps/…, /a/…, /community/… or /tools/… gets no answer: those paths need Shopify’s online store. On .webflow.io the debugger names them. See Shopify apps on a Webflow site.

Where people get stuck