# Dynamic properties

> Fields the customer fills before adding to the cart, such as an engraving or a choice, decided product by product in Shopify and designed once in Webflow.

Status: Ready (Smootify 2.0)  
Add-on: Dynamic Properties  
1.x page: https://docs.smootify.io/docs/ecommerce/add-ons/dynamic-properties  
URL: https://www.smootify.io/docs/features/dynamic-properties  
Updated: 2026-10-11

Dynamic properties are the questions a product asks before it goes to the cart: the text to engrave, a name and number for a shirt, a delivery time, a confirmation box. The merchant decides in Shopify which product asks what. In Webflow you design each kind of field once, on the product template, and each product shows only its own. The answers travel with the cart line to the order.

> [!NOTE]
> Turn on **Dynamic Properties** in the Smootify dashboard. It is free. It adds the **Dynamic Property** metaobject definition and the **Dynamic Properties** product metafield to Shopify. In Shopify, under **Settings > Custom data**, check that both have **Storefront access**: Smootify creates them with it, but a definition that already existed in the store keeps its own setting.

Properties are not variant options. Options make variants, with their own price, SKU and stock. A property changes nothing about the product: it only records the customer’s answer. To make an answer change the price, see the [product configurator](https://www.smootify.io/docs/features/product-configurator).

## 1. Create the properties in Shopify

In Shopify, go to **Content > Metaobjects > Dynamic Property** and create one entry per question. Its fields:

| Field | What it does |
|---|---|
| **Title** | links the entry to Webflow: it is the `label` of the element. It is also shown as the field's label |
| **Property Name** | the name the answer is saved under, shown in the cart, at checkout and on the order |
| **Property Type** | Text, Number, Email, Url, Select, Dropdown, Radio, Checkbox or Swatches |
| **Placeholder** | the placeholder of a text field, or the first, empty entry of a select or dropdown |
| **Values** | the choices of a Select, Dropdown, Radio or Swatches property |
| **Images** | for Swatches: one image per value, in the same order as **Values** |
| **Required?** | the customer must answer before adding to the cart |
| **Custom attributes for the input** | extra rules for a text field, one entry per rule, written `name:value`, such as `maxlength:20` or `min:1` |

On stores set up with an earlier version, the **Title** field may be called **Label**: it works the same way.

Then open each product and pick its properties in the **Dynamic Properties** metafield.

## 2. Add the fields in Webflow

On the product template page, inside the Form of `smootify-add-to-cart`:

1. Add a Custom element with the tag `dynamic-property`.
2. Give it the custom attribute `label`, with the **Title** of the Shopify entry, written exactly the same.
3. Inside it, put the Webflow element its type needs (see below).

```html
<dynamic-property label="Engraving">
  <label>Engraving</label>
  <input name="engraving">
</dynamic-property>
<dynamic-property label="Finish">
  <label>Finish</label>
  <button>Value</button>
</dynamic-property>
```

Smootify gives the field the **Property Name**, the placeholder, the **Required?** setting and the custom attributes from Shopify. A Field Label inside the element takes the **Title** as its text. You design the rest.

**Design once for every product.** Add one `dynamic-property` for each property your products may use. On a product that does not have that property, the element is removed. With `delete-parent`, its parent element is removed instead: use it when the field sits in a wrapper with its own heading or spacing.

### The element for each type

Each **Property Type** needs its own Webflow element inside `dynamic-property`:

| Property Type | Put inside `dynamic-property` | How it shows the choices |
|---|---|---|
| Text, Number, Email, Url | a Text field, with its Type set in its settings | the Placeholder is the field's placeholder |
| Select | a Select field | Smootify writes its options. The Placeholder, when set, is the first entry, with no value |
| Dropdown | a Webflow Dropdown with one Dropdown link, or an element with a popover | the first Dropdown link, or the first link or button inside the popover, is the template of every value; the toggle, or the popover's trigger, shows the choice. The Placeholder, when set, is the first, empty entry |
| Radio | one Radio button | it is the template of every value; its label takes each value |
| Checkbox | one Checkbox | its label takes the **Title**; when checked, the answer is saved as ✓ |
| Swatches | one Custom element with the tag `button` | it is the template of every value: an element with `option="title"` inside it gets the value, an Image with `option="image"` the value's image from **Images**. Without an `option="title"` element, the value replaces everything inside the button. The chosen button gets the class `is-active` |

For a popover in place of the Webflow Dropdown, see [popovers](https://www.smootify.io/docs/build/popovers). A required Dropdown or Swatches property left empty gives the class `is-invalid` to the element that shows it, so you can style the error.

**Show the answer elsewhere.** A text element with the custom attribute `form-value` and the field’s Name in Webflow, inside the same `smootify-product`, shows the answer as the customer types, such as the recipient’s name on a gift card preview: a text element with `form-value="Recipient name"` after “for”. Give it `data-fallback="Anna"` to show a sample name until the customer writes one. For a choice, it shows the chosen label. It reads any field of the add to cart form, a plain field as well as a dynamic property.

## 3. What reaches the order

The answer is saved on the cart line under the **Property Name**. It shows in the [cart](https://www.smootify.io/docs/build/cart), at checkout and on the order in Shopify.

**Hidden properties.** A **Property Name** that starts with `_`, such as `_production_code`, is saved on the order but not shown in the cart or at checkout. Use it for data the merchant needs and the customer does not.

Developers can check or complete the answers before they reach the cart, for example to reject an engraving that is too long: see [filters](https://www.smootify.io/docs/developers/filters).

## Before you publish

> [!STUCK]
> - **No property shows.** The definitions are missing because Dynamic Properties was never turned on, or the metafield or the metaobject definition has no Storefront access, or the product's **Dynamic Properties** metafield is empty.
> - **One property never shows.** Its `label` is not written exactly like the entry's **Title**.
> - **The answer is not in the cart.** The `dynamic-property` is outside the Form, or the entry has no **Property Name**.
> - **A choice property is empty.** The entry's **Values** field is empty.
> - **Swatch images are mixed up.** The **Images** are not in the same order as the **Values**.
> - **The field disappears on some products.** That is expected: those products do not have the property. Add `delete-parent` to remove its wrapper too.