In short
- Slot booking. A calendar you design books appointments and pickup or delivery windows. Smootify’s server counts the places, so the last one goes to one customer only.
- Storefront API 2026-10. 2.0 talks to Shopify on Storefront API version 2026-10, the current one.
- Your 1.x markup keeps working. The elements, attributes, state classes and options keep their names. The exceptions are listed below, each with what to do.
- Jobs that needed another app. The cookie banner, the pixels, the product gallery, structured data and every metafield type are in the markup you design.
- A public API for developers.
window.Smootifywith events, filters and published TypeScript types, and the Shopify AJAX endpoints theme apps call.
The announcement, with the before and after: Smootify 2.0 is in public beta.
New in 2.0
What 1.x did not have. Each card opens the page of the docs that sets it up.
Slot bookingA calendar you design books a time slot: an appointment with a form, a paid appointment with a product, or a pickup or delivery window in the cart. Smootify’s server counts the places, so the last one goes to one customer only; a Shopify Flow template confirms the slots of each order, on every Shopify plan. The bookings are the store’s Booking metaobjects. Server plan, Booking add-on.Read the docs One script, with release channelsOne script in the head loads Smootify, on
latest, beta or a version you pin. The in-app browsers of Instagram, Facebook and TikTok on iPhone get a build made for them.Read the docs A cookie banner you designsmootify-consent is a banner built in Webflow over Shopify’s Customer Privacy API, shown where the visitor’s region asks for consent.Read the docs Pixels loaded with consentMeta, Google Analytics 4, Google Ads and TikTok, loaded by Smootify once the visitor allows them, with the product ids of Shopify’s catalogs.Read the docs Product structured dataThe product’s JSON-LD on every product page, one offer per variant, in the market’s currency, so Google can show it as a rich result.Read the docs The product gallery in one blockproduct="gallery": slider, thumbnails and lightboxes together, with the images of the selected variant only if you want.Read the docs Every product videoproduct="videos" and product="external-videos" show all the videos of a product, each in its own copy of your element.Read the docs Attributes for product cardsColor dots (option-values), collections, the crossed-out price range, stock, the creation date, an “is new” condition and the quantity rules of a variant.Read the docs Fixed bundlesvariant="components" lists the products of a Shopify bundle, with their quantity, image and link.Read the docs Savings in the cartWhat the cart and each line save, the discount as a percentage, the variant title, the SKU and the unit price of a line.Read the docs What a value adds to the priceoption="price-difference" shows “+ €180” next to the values that cost more, in swatches, dropdowns and selects.Read the docs Webflow popovers everywhereThe mini cart and every panel Smootify opens also work as a popover, with Escape, the click outside and the focus the browser gives it.Read the docs Every metafield typeLists, ratings, JSON with data-path, and product, variant, collection and page references render without code.Read the docs Market suggestionA popover suggests the visitor’s country, language and currency, once per browser, with the country read on the site’s own domain.Read the docs A message for a product not sold hereWhen the page’s product is not available in the visitor’s market, condition="product-unavailable" shows your message, with a country switcher.Read the docs Buy an order againOne button in the account adds the lines of a past order back to the cart, with their options.Read the docs Saved variants on the wishlist pageWith data-use-variants the wishlist saves the variant, and the wishlist page lists variants, products, or both.Read the docs Numbered pagesSearch & discovery and the search page show page numbers, as Shopify’s pagination does, with the page in the URL.Read the docs Search inside a collectionThe search box works on a collection page: the results of the search that are in that collection.Read the docs Forms tied to the customerA metaobject creator form can link each entry to the logged-in customer. Smootify’s server writes it, so a page cannot fake it.Read the docs Form values that fit each fieldA metaobject creator form fills every kind of field: ratings, lists from a checkbox group, true or false, references, rich text, money, dates, and measures with their unit.Read the docs Upload fields you designThe upload elements use your markup: a drop zone, a list of files with previews and progress, your error messages. The limits are Shopify’s.Read the docs Accessible statesThe states Smootify shows with classes are also written for screen readers: the chosen value, the unavailable ones, the errors.Read the docs Faster product pagesThe products of the links a visitor is about to open are fetched ahead, so the next product page renders from the cache.Read the docs Apps written for Shopify themesSmootify answers the Shopify AJAX endpoints a theme app calls, from cart.js to search/suggest.json.Read the docs A configuration in a linkconfigurator-share shares a link to the product with the customer’s choices: whoever opens it finds the configurator filled in and the same price.Read the docs A wishlist shared through a linkwishlist-share sends a link to the wishlist page with the saved items. Whoever opens it sees that list, with no account, and the toggles add to their own list.Read the docs Product cards from a metaobjectsmootify-product with data-id="metaobject.products" inside a smootify-metaobject repeats a full product card, with price and add to cart, for each product of that entry’s field: a shared gift list, a curated selection.Read the docs A metaobject from the page linkdata-handle-param on smootify-metaobject shows the entry named in the URL: one page for every entry a form creates, such as a shared gift list or a saved configuration, without a CMS page for each.Read the docs Shopify Inbox chatShopify’s free chat works on a Webflow site, and the visitor adds products to the cart from the chat without reloading the page.Read the docs A sticky add to cartA button outside the form, tied to it with form, adds to the cart with the loading label and the disabled state of the ones inside.Read the docs A JavaScript APIwindow.Smootify with a queue for code that runs early, events, four filters, new methods, and the TypeScript types published with every release.Read the docs Breaking changes
Check these on your site before you switch. Each one is a change you make once. The whole list, with what behaves differently on the page, is in What changes for your site.
| Change | What to do |
|---|---|
| A new script tag | Replace the two 1.x lines with the 2.0 loader. Until you do, the site stays on 1.x. How |
| Plural URLs by default | Links are built as /products/…, /collections/… and /vendors/…. Template pages on the singular slugs set productsBase, collectionsBase and vendorsBase. How |
| Classic customer accounts removed | Turn on Shopify’s new customer accounts and set newCustomerAccountsPublicKey. The classic login, register and password forms remove themselves. How |
The variation attribute | Rename it to variant, keeping its value. How |
| The country field of address forms | Rename the country Select field from territoryCode to countryCode, which Shopify uses now. Without it the form removes itself. How |
| Shopify’s cookie banner | Build the banner in Webflow with smootify-consent. The body class while it shows is cookie-banner-visible. How |
| The store’s color patterns | Swatches use Shopify’s own swatches, or the option metaobject in custom.options. How |
| Automatic placeholders | Add skeleton to the elements that should shimmer while they load. How |
| FilePond upload fields | Design the upload parts in Webflow, and restyle anything that used the .filepond classes. How |
| The redirect for missing products | Smootify never leaves the page: use condition="product-unavailable" to show a message instead. How |
| Content Security Policy | A site that sets its own CSP allows blob: in worker-src. |
Deprecated
These keep working in 2.0. On .webflow.io, the debugger points them out.
- Gallery pieces.
product="images"andproduct="media"as gallery pieces,showOnlyActiveImagesandactiveImagesMode: oneproduct="gallery"does the same. Read more. - Three 1.x hooks.
window.smootifyAddOnsBox,window._filterDraftOrderDataandwindow._metafieldsDefsFilter: the filters of the JavaScript API replace them. Read more. - Wishlist event names. The 1.x
smootify_wishlist:…names are sent next to the newsmootify:wishlist:…ones. Read more.
Bug fixes
Fixes to real 1.x bugs. You change nothing for them, but some numbers and texts can differ from what the 1.x site showed: see What 2.0 fixes.
| Area | Fix |
|---|---|
| Preselected configurator values | A value a configurator field had when the page opened was left out of the price until the next change, while the cart line carried it. It is in the price from the start. |
| Crossed-out cart total | cart="compare-at-total" added discounted lines up wrongly and left out lines at full price. It shows what the lines add up to before their discounts. |
| Automatic discounts in the cart | cart="discount" listed only the codes. It lists the automatic discounts of the order too. |
| Unit prices | A price per 100 g read as a price per gram. variant="unit-price" writes the reference quantity: €1.50/ 100 g. |
| Dates west of Greenwich | Date metafields showed the day before in the Americas. They show the day stored in Shopify, in every time zone. |
| Weights and volumes | Weight and volume metafields print the unit symbol, 650 g, instead of 650 GRAMS. |
| Countdown minutes | urgent-cart-countdown showed the minutes modulo 60. It shows the total minutes. |
| Products with more than 250 variants | Option values used only by later variants were missing. The product page loads every variant before it shows the product. |
| Wishlist per variant | data-use-variants did nothing. The toggle saves the current variant. |
| Subscription totals | The totals of a subscription always showed 0. They show the amounts of the order that started it. |
| Placeholders that never went away | Outside the product, the cart and search, a skeleton stayed and left the element unclickable. It goes once Smootify fills the element. |
| Animations played again | Page-load animations replayed after a render, and intros froze. Animations that already played keep their state. |
| Sort dropdown | sort-dropdown did not close its Webflow Dropdown after a choice. It does. |
| Location switcher | The toggle of location-switcher stayed empty. It shows the location’s name and address. |
| Mini cart and upsells | Adding an upsell closed a mini cart built with details. The cart stays open and shows the new line. |
| Quantity breaks | A quantity-break price of the product configurator was shown but not charged when no field changed the price. It is charged. |
| Buy now with a configured price | It emptied the visitor’s cart. It no longer does. |
| Name your price with add-ons | Only the main product was added. The add-ons and bundles of the same form are added with it. |
| Uploads in progress | A product could go to the cart while its file was still uploading. The form waits for the upload. |
| Product views without consent | The automatic product-view events went out before consent. They wait for it, like the cart events. |
| Mixpanel | Mixpanel did not receive the events. It does. |
| Tag conditions | Spaces after the commas broke tagged="vip, gold", and exclusive never matched two tags. Both work. |
| Webflow’s Email field and Klaviyo | The back in stock form answered “Invalid Email” with Webflow’s own Email field. A field named email, in upper or lower case, and Webflow’s Email field both work. |
| A note in a text field | A Text field named Note was ignored: only a Text area saved the order note. Both save it. |
| The metafields editor | Select fields, text areas and fields named with spaces stayed empty, and a checkbox could not be unticked. They are filled in, and an unticked checkbox saves false. |
| The name form | Any field besides the first and last name made Shopify refuse the update. The other fields are ignored. |
| Styled cookie checkboxes | Webflow’s styled checkboxes did not show the choice the visitor had saved. They do. |
| In-app browsers on iPhone | The 1.x loader sent the Instagram and Facebook browsers a build that did not work there. They get a build made for them. |
Events
- New in 2.0:
cart_opened,cart_closed,consent_changed,variant_changed. - Now sent:
created_address,wishlist:changed_variant,wishlist:changed_variant_state, which 1.x declared and never sent. - One event per thing that happened: while a page loads, each product is announced once, and a price event goes out only when the price changes. A script that counted events to know when loading ended listens to
loaded.
The payloads of every event, and the filters, are in Events and Filters.
Upgrading
A 1.x site keeps working as it is: nothing changes until you switch its script. To move, follow Move a site from 1.x, and try it on your .webflow.io address first, with the debugger on. Your agent can do the checking: the site audit skill and the Smootify MCP list what to change on a 1.x site.