# Server extensions (plan server)

> File uploads, newsletter, metaobject forms, name your price and the configurator: server plan.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/elements/server-extensions  
Updated: 2026-10-13

| Element | What it does | Requires |
|---|---|---|
| [`[upload="dropzone"]`](https://www.smootify.io/docs/reference/elements/upload-dropzone) (template) | Drop and click area; defaults to the element itself. | Every plan |
| [`[upload="error"]`](https://www.smootify.io/docs/reference/elements/upload-error) (template) | The item’s error message, hidden without one. | Every plan |
| [`[upload="errors"]`](https://www.smootify.io/docs/reference/elements/upload-errors) (template) | Messages of the rejected files, hidden without any. | Every plan |
| [`[upload="item"]`](https://www.smootify.io/docs/reference/elements/upload-item) (template) | Item template cloned per file; a minimal one is generated when missing. | Every plan |
| [`[upload="list"]`](https://www.smootify.io/docs/reference/elements/upload-list) (template) | Holds one item per file; created when missing. | Every plan |
| [`[upload="name"]`](https://www.smootify.io/docs/reference/elements/upload-name) (template) | File name. | Every plan |
| [`[upload="preview"]`](https://www.smootify.io/docs/reference/elements/upload-preview) (template) | Image preview of the file (img source or background image). | Every plan |
| [`[upload="progress"]`](https://www.smootify.io/docs/reference/elements/upload-progress) (template) | Upload progress (a progress element, or percentage text). | Every plan |
| [`[upload="remove"]`](https://www.smootify.io/docs/reference/elements/upload-remove) (template) | Removes the file. | Every plan |
| [`[upload="size"]`](https://www.smootify.io/docs/reference/elements/upload-size) (template) | File size, hidden when unknown. | Every plan |
| [`booking-calendar`](https://www.smootify.io/docs/reference/elements/booking-calendar) | Shows the slots of a bookable product (its Booking schedule, set in the Shopify admin) for days days, the places left of each, the day in the site’s language and the time in the place’s time zone; picking a free slot books it as its container says. In a booking-form: the form books it. In a product’s add to cart: adding the product holds the slot for the quantity and writes it on the product’s lines (a paid appointment); no slot or a full one stops the addition with the message, and an addition that does not get in (Shopify refuses it) gives the slot back. In the cart: the picked slot is written on the cart (a pickup or delivery window) and held only when the visitor checks out, so picking holds no place; a slot taken by someone else meanwhile stops the checkout, with the message in [booking=“error”], and with data-required the checkout stops until a slot is picked. The places are counted by Smootify: two visitors cannot book the last one. The availability is kept a minute, so pages opened again ask nothing. | Server plan, Booking extension |
| [`booking-form`](https://www.smootify.io/docs/reference/elements/booking-form) | Books the slot picked in its booking-calendar without a cart (an appointment): the booking, with the form’s name, email, phone and note fields and the logged-in customer, is saved in the store’s Bookings (Shopify admin → Content → Metaobjects) and shown on the product’s Smootify booking block. Webflow’s success and error states show the answer; a slot that filled up meanwhile is the form error and the calendar shows its places again. | Server plan, Booking extension |
| [`configurator-checkbox`](https://www.smootify.io/docs/reference/elements/configurator-checkbox) | Checkbox whose formula step is on while checked. | Server plan, Product configurator extension |
| [`configurator-dimension`](https://www.smootify.io/docs/reference/elements/configurator-dimension) | Number inputs named after formula variables; the step is on when all hold valid numbers. | Server plan, Product configurator extension |
| [`configurator-dropdown`](https://www.smootify.io/docs/reference/elements/configurator-dropdown) | Webflow dropdown over a hidden select whose chosen option carries the formula step. | Server plan, Product configurator extension |
| [`configurator-field`](https://www.smootify.io/docs/reference/elements/configurator-field) | Groups configurator fields; has no effect of its own. Every configurator field counts the value it already has when it mounts (typed before the configurator loaded, restored by the browser on Back, a default value / checked / selected), as the add to cart sends it. | Server plan, Product configurator extension |
| [`configurator-file-input`](https://www.smootify.io/docs/reference/elements/configurator-file-input) | File uploader that is also a formula step, with the number of files as variable. | Server plan, Product configurator extension |
| [`configurator-input`](https://www.smootify.io/docs/reference/elements/configurator-input) | Text input whose formula step is on while its value is valid, with its length as variable. 2.0: also letters, its characters without spaces (“Studio Rossi”: length 12, letters 11). | Server plan, Product configurator extension |
| [`configurator-popover`](https://www.smootify.io/docs/reference/elements/configurator-popover) | The configurator dropdown with its options in a popover. | Server plan, Product configurator extension |
| [`configurator-radio`](https://www.smootify.io/docs/reference/elements/configurator-radio) | Radios whose checked option carries the formula step. | Server plan, Product configurator extension |
| [`configurator-select`](https://www.smootify.io/docs/reference/elements/configurator-select) | Select whose chosen option carries the formula step. | Server plan, Product configurator extension |
| [`configurator-share`](https://www.smootify.io/docs/reference/elements/configurator-share) | Shares a link to this page with the visitor’s configuration: one url parameter per configurator field, named as its control (name: ?Engraving=abc&Finish=gloss&width=120), plus ?variant= when the product has more than one. A page opened from such a link starts every configurator field from its parameter, applied as a visitor would (the same input / change, so a value the field refuses stays off: below min, an option the select does not have; text cut at maxlength), and the price follows; names the page does not have are ignored, and a file stays out of the link (uploaded again). The device’s share sheet where there is one, else the link is copied (data-copy: always copied). | Server plan, Product configurator extension |
| [`error-message`](https://www.smootify.io/docs/reference/elements/error-message) (template) | Error text shown only while the field is invalid (CSS only): a value out of its limits, or (2.0) a required configurator-radio group with no choice, which marks its host is-invalid instead of the browser bubble until a radio is picked. The browser’s own message never shows on these fields, so a design gives each one an error-message with its limits. | Every plan |
| [`file-input`](https://www.smootify.io/docs/reference/elements/file-input) | Uploads files to Shopify and submits their gids as one form field. The saved files of its value show their file name, and their image when data-preview is set or (2.0) the designed item template has an [upload=“preview”]. | Server plan |
| [`file-uploader`](https://www.smootify.io/docs/reference/elements/file-uploader) | Uploads files to Shopify and adds their names, gids and admin links to the cart line. | Server plan, Product File Upload extension |
| [`input[type="file"]`](https://www.smootify.io/docs/reference/elements/input-type-file) (template) | The file picker; created hidden when missing. | Every plan |
| [`metaobject-creator`](https://www.smootify.io/docs/reference/elements/metaobject-creator) | Creates a metaobject from a Webflow form: every filled field whose name does not start with _; a name the form repeats (a checkbox group with each checkbox’s value, a multiple select) sends all its values; a lone checkbox sends true / false. The backend converts each value to its field type: rating from a number (the field’s scale), list.* from repeated values, a comma separated text or a JSON array, boolean, number_decimal with a comma, url without https://, references from a numeric id, rich_text_field from lines (one paragraph each), money in the shop currency, date_time from datetime-local, dimension / volume / weight from “2.5 cm” (a select data-unit-for=“`<name>`” gives the unit of that field, its own name is not sent); a value already in Shopify’s format passes as it is. A definition without the publishable capability gets no status (data-draft is ignored there). The backend refuses Shopify’s standard types (shopify—…), the app-reserved ones ($app:…) and Smootify’s own (magic_box, combinations, dynamic_property, option), with the form error “This form cannot create entries of this metaobject type”. customer-field=“`<key>`”: the entry belongs to the logged-in customer, written by the backend into that field (a customer reference) from the Customer Account token, never from the form; logged out the element is hidden and its form inert (is-customer while logged in), and a request without a valid token is refused (“Log in to send this form”). 2.0: with customer-field the backend also puts the entry, first, into the customer’s metafield smootify.`<type>` (a list of references to that type, created the first time, at most 128: the oldest leave the list), which smootify-metaobjects[data-type=“metafield.smootify.`<type>`”][data-parent-id=“customer”] lists on the account pages. Once the entry is created: data-handle and is-created on the host, every a[data-handle-param=“`<param>`”] inside (in the form’s success state) links its page with ?`<param>`=`<handle>`, the page whose smootify-metaobject[data-handle-param] shows the entry (a gift list), and button[data-action=“share”] shares that link: the device’s share sheet where there is one, else it is copied (data-copy always copies, data-title titles the share), is-shared / is-copied on the button for two seconds. 2.0: input[type=number][data-quantity-for=“`<list key>`”] beside each checkbox of that list (in the same product card) sends, under its own name, one JSON field {“`<product id>`”: n} with the count of every checked product (at least 1; an unchecked one is left out), such as how many units a gift list asks for. | Server plan, Metaobject creator extension |
| [`metaobject-editor`](https://www.smootify.io/docs/reference/elements/metaobject-editor) | 2.0: the logged-in customer edits or deletes an entry they own, one a metaobject-creator[customer-field] made (a gift list, a warranty registration). The entry is the one smootify-metaobject would show: data-handle-param (the page url’s parameter), else data-id, else data-handle, with data-type. Its form is filled with the entry (a text its value, a lone checkbox true, the checkboxes of a list the values in it, a radio or a select its value, a data-quantity-for input its product’s count, a file-input its saved files) and sends its fields as metaobject-creator does, as an update. Only the customer whose id is in customer-field gets is-owner and a working form; anyone else, or logged out, gets neither (hidden by skeleton.css, form inert), and the backend checks the token’s customer against the entry again (“This entry belongs to another customer”); the customer field itself never changes. button[data-action=“delete”] deletes the entry, after data-confirm=“`<question>`” when set, and takes it out of the customer’s smootify.`<type>` list; then is-deleted on the host (form inert) and data-redirect=“`<url>`” goes there; a refusal shows in the form’s .w-form-fail. | Server plan, Metaobject creator extension |
| [`name-your-price`](https://www.smootify.io/docs/reference/elements/name-your-price) | Lets the customer type the unit price the product is added at. 2.0: not on a gift card product (Shopify issues the card for its variant’s value whatever was paid): there it removes itself, and no price source (the configurator’s either) changes a gift card’s price. | Server plan, Name your price extension |
| [`newsletter-subscribe`](https://www.smootify.io/docs/reference/elements/newsletter-subscribe) | Subscribes the email of a Webflow form to the newsletter. | Server plan, Newsletter Subscription extension |
| [`quantity-input script[type="application/json"]`](https://www.smootify.io/docs/reference/elements/quantity-input-script-type-application-json) (template) | Quantity-break table applied to the configured price: each break’s price applies from its min quantity (included) up to the next break. | Every plan |