Smootify’s elements and attributes cover what most stores need. When a site needs something they do not, such as an engraving that must be filled in before the product goes to the cart, the answer is a small script. Smootify Studio, the desktop app, gives each site a folder of scripts and writes them with you through Claude. Claude loads Smootify’s custom-script skill and the site’s details, so it knows the markup and the events before it writes a line.
A script talks to Smootify through four public parts, and nothing else:
Methods: ask and act
- Use it to
- Read the cart, the products, the customer or the market; add to the cart; open the mini cart.
- For example
getCart(),addToCart(),getCustomer()- Good to know
- Call them from a
pushfunction. Most return a Promise.
Events: react to what happened
- Use it to
- Keep your own counter in sync, track additions, start analytics after consent.
- For example
cart_updated,added_to_cart,consent_changed- Good to know
- What the handler returns is ignored.
oncestops after the first event.
Filters: change it before it happens
- Use it to
- Check or enrich the lines added to the cart, change the checkout address or a draft order, choose the metafields the page asks for.
- For example
add_to_cart_lines,checkout_url- Good to know
- Answer the value changed, nothing to keep it, or
falseto stop.
AJAX API: apps written for Shopify themes
- Use it to
- Run an app's snippet as it is: Smootify answers the theme endpoints on the page.
- For example
/cart.js,/cart/add.js,/products/{handle}.js- Good to know
- Same cart as the page. Start the snippet with
type="smootify-load".
1. Connect Claude to Studio
Install Smootify Studio and open your site from the sidebar. Then connect Claude once: Studio uses your own Claude Code, signed in with your Claude account. It checks that Claude Code is installed and signed in, and never reads your sign-in.
It worked when Studio shows Claude as connected. Syncing the CMS does not need it.
2. Start a script
In the site’s scripts, start a new one. Studio creates its folder: a small TypeScript project with Smootify’s types (smootify.d.ts) and the site’s settings. You can open the folder in your own editor or terminal at any time.
It worked when the script’s folder exists and a conversation with Claude opens in it.
3. Tell Claude what the script should do
Say it in plain words, as you would to a developer: “On the product page, the engraving field must be filled in before the product goes to the cart, and the engraving goes on the cart line”. Claude asks one question when what you want is unclear, then writes the script with Smootify’s conventions:
- the code starts in
window.Smootify.push, so it waits for Smootify; - it uses the public API: methods, events with their payloads, and filters, such as
add_to_cart_linesto check a line before it goes to the cart; - it reads the markup of your page, and says what it needs there, such as the name of the engraving field.
It worked when Claude has written the script and told you what the page needs. More in Run your scripts with Smootify and Filters.
4. Try it on the real site
Studio’s dev server runs your latest code on the real site at every reload: open your .webflow.io address and try it, with no publishing to see a change. Ask Claude for changes in the same conversation.
To see what Smootify does while you test, press Alt⇧ ShiftD (⌥ Option⇧ ShiftD on a Mac): the debugger’s Flow tab shows the requests, the events and the changes as they happen.
It worked when the script does what you asked on the page, and the browser console shows no error.
5. Build it
One click type-checks the source and turns it into the single small file the site loads. A type error stops the build and says where it is.
It worked when the build ends without errors and gives you the file.
6. Put it on the site
Claude tells you how, depending on the size:
- A small script goes inline: pasted in the site’s custom code (Site settings → Custom code) for every page, or in a page’s settings for one page.
- A script too big for Webflow’s custom code limits is uploaded to your own Cloudflare R2 storage, and the site loads it from there.
Where it sits on the page does not matter: window.Smootify.push makes it wait for Smootify. The order in which things run at load:
event goes out1your code runs, by its way of waiting aboveuser_auth_changeThe first one goes out before your functions run.push functions1window.Smootify.pushThe listeners and filters they add get every step below.cart_updatedsmootify:loaded3smootify:loaded listeners2smootify-load scriptsThe listeners first, then the scripts.product_loadedOnce per product.It worked when the script runs on your .webflow.io address without the dev server. Then publish to your domain.
Where people get stuck
Check these first
- Claude does not open in Studio. Claude Code is not installed, or not signed in. Studio says which.
- The script runs before Smootify. The code is outside
window.Smootify.push. A third-party snippet that calls the cart goes in a<script type="smootify-load">. - The script works with the dev server, not on the site. The built file is not on the site yet, or the page was not published after you pasted it.
- A listener never runs. It was added after the event went out. Add it inside
window.Smootify.push, or pass{ replay: true }toSmootify.on.