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.
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.
1. Create the properties in Shopify
In Shopify, go to Content > Metaobjects > Dynamic Property and create one entry per question. Its fields:
Content › Metaobjects › Dynamic Property › Engraving
Links the entry to Webflow: it is the label of the element. Also shown as the field's label.
For Swatches: one image per value, in the same order as Values.
The name the answer is saved under, shown in the cart, at checkout and on the order.
Text, Number, Email, Url, Select, Dropdown, Radio, Checkbox or Swatches.
The placeholder of a text field, or the first, empty entry of a select or dropdown.
The customer must answer before adding to the cart.
The choices of a Select, Dropdown, Radio or Swatches property.
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:
- Add a Custom element with the tag
dynamic-property. - Give it the custom attribute
label, with the Title of the Shopify entry, written exactly the same. - Inside it, put the Webflow element its type needs (see below).
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:
A Text field
- Inside
- A Text field, with its Type set in its settings.
- Placeholder
- The field's placeholder.
A Select field
- Inside
- A Select field. Smootify writes its options.
- Placeholder
- The first entry, with no value.
A Dropdown or a popover
- Inside
- A Webflow Dropdown with one Dropdown link, or an element with a popover.
- Template
- The first Dropdown link, or the first link or button in the popover.
- Choice
- Shows in the toggle, or in the popover's trigger.
- Placeholder
- The first, empty entry.
Radio buttons
- Inside
- One Radio button: the template of every value.
- Label
- Takes each value.
A Checkbox
- Inside
- One Checkbox.
- Label
- Takes the Title.
- Checked
- The answer is saved as ✓.
Buttons
- Inside
- One Custom element with the tag button: the template of every value.
- Parts
option="title"gets the value, an Image withoption="image"its image from Images. Withoutoption="title", the value replaces everything inside.- Chosen
- The button gets
is-active.
For a popover in place of the Webflow Dropdown, see 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, 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.
Before you publish
Check these first
- 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
labelis not written exactly like the entry’s Title. - The answer is not in the cart. The
dynamic-propertyis 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-parentto remove its wrapper too.