Markup contract: the Smootify 2.0 spec for Webflow markup

What the contract is

The contract is written from the source code of the 2.0 runtime, element by element: the tag, where it must sit, the attributes it reads on itself and inside it, what happens when it is out of place, the plan and add-on it needs, its state classes and its events. With it comes the attribute glossary: every value of product, variant, cart, condition and the others.

You read it as the Reference of the docs, one page per element and attribute.
Your agent reads it through the Smootify MCP, and checks its markup against it.
The Webflow app suggests the attributes that fit where an element sits, from the same glossary.

How the markup works

Elements are Custom elements with a Smootify tag, such as smootify-product. Webflow’s own elements inside them get Smootify attributes, such as product="title" on a Heading.
Scope comes from nesting. An attribute reads the nearest element above it: product="title" shows the title of the smootify-product it sits in.
Templates are designed once. The first cart-item, or the first button of variant-swatches, is copied once per line or value.
An element out of place is removed from the page or left inert, as the contract says for each one. On your .webflow.io address the debugger tells you which and why.
No code is needed for what the elements do. Custom code goes through window.Smootify.

Main elements

Element	What it needs	What it does
`smootify-product`	`data-id` with the product id	Loads a Shopify product into a scope and binds what is inside it.
`variant-swatches`	one `button` inside, the template of each value	One button per value of a product option.
`smootify-price`	`data-prop` on the elements inside	Writes the price, compare-at price and total of its scope.
`smootify-add-to-cart`	a Form Block inside	The product form: turns the selection into cart lines.
`smootify-cart`	a Form Block with a `cart-item` inside	Renders the cart, and opens or closes it as a mini cart.
`smootify-variant`	`data-product-id` with the product id	Repeats its block once per variant of a product.
`smootify-search-discovery`	a `smootify-product` with `data-id="filter"` inside	A product list with filters, sorting and pagination.
`metaobject-creator`	`data-type`, and a Form Block inside	Saves a Webflow form as a metaobject entry in Shopify.
`file-uploader`	the `upload` parts inside, in the add-to-cart form	Uploads files to Shopify and adds them to the cart line.
`smootify-consent`	buttons with `data-action` inside	The cookie banner and preferences, over Shopify’s Customer Privacy API.

All 104, by area, in the elements Reference.

Example

A product with its title, price, a picker and an add-to-cart form, as built in Webflow. It passes the MCP’s check_markup with no error:

<smootify-product data-id="8123456789">
  <h1 product="title">Oak table</h1>
  <smootify-price><div data-prop="price">€0.00</div></smootify-price>
  <smootify-add-to-cart>
    <div class="w-form">
      <form>
        <variant-swatches data-option-name="Wood">
          <button type="button"><span option="title">Oak</span></button>
        </variant-swatches>
        <input type="submit" value="Add to cart" data-wait="Adding…">
      </form>
      <div class="w-form-done"><div>Added</div></div>
      <div class="w-form-fail"><div>Something went wrong</div></div>
    </div>
  </smootify-add-to-cart>
</smootify-product>

In Webflow, data-id is bound to the product’s Shopify ID field: see Build the product page.

State and events

Elements share state through the scope they sit in: when the visitor picks an option, everything in the same smootify-product follows. Elements carry state classes, such as is-available or is-on-sale, and condition shows or hides parts by state: see state classes and conditions. Code can listen to 23 events, documented in Events.

Versions

The contract ships with each release of the runtime, and the changelog says what each one adds. Coming from 1.x, What changes for your site lists what was renamed or removed, with what replaces it, and the 11 elements 2.0 no longer reads are in Removed in 2.0.

Checking a build

Before pasting into Webflow: the MCP’s check_markup checks HTML, a Webflow clipboard payload or a Designer tree.
While you build: the debugger on your .webflow.io address lists every element that is out of place.
After publishing: the MCP’s audit_page and audit_site, or the site audit skill, read the live pages.

Markup contract.