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 written once in the product component.
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 the product component you write each kind of field once, 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:
| Field | What it does |
|---|---|
| Title | links the entry to the markup: 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 the component of the product page, inside the <form> of smootify-add-to-cart:
- Add the element
dynamic-property. - Give it the attribute
label, with the Title of the Shopify entry, written exactly the same. - Inside it, put the element its type needs (see below).
<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 attributes from Shopify. A 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 element inside dynamic-property:
| Property Type | Put inside dynamic-property | How it shows the choices |
|---|---|---|
| Text, Number, Email, Url | an input, with its type | the Placeholder is the input’s placeholder |
| Select | a select | Smootify writes its options. The Placeholder, when set, is the first entry, with no value |
| Dropdown | a [popover] with its trigger, a button with popovertarget | the first link or button inside the popover is the template of every value; the trigger shows the choice. The Placeholder, when set, is the first, empty entry |
| Radio | one <label><input type="radio"><span form-label>…</span></label> | it is the template of every value; its [form-label] takes each value |
| Checkbox | one <label><input type="checkbox"><span form-label>…</span></label> | its [form-label] takes the Title; when checked, the answer is saved as ✓ |
| Swatches | one button | it is the template of every value: an element with option="title" inside it gets the value, an img 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 the popover, 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 attribute form-value and the field’s name, 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.