Appearance
Formula
Let customers type their measurements — width, height, depth — and show them a result your formula calculates from those numbers, such as an area in m².
Overview
Formula is an input option type for made-to-measure products. The customer types up to three measurements into number fields, and a formula you write turns them into one result that's shown live under the fields — for example 0.96 m². The measurements and the result are recorded on the cart line, and the result can drive conditions.
Use Formula for:
- Blinds, curtains and shades (width × height → area)
- Flooring, carpet, fabric and wallpaper
- Signs, glass, panels and printed boards
- Boxes and crates (width × height × depth → volume)
- Frames and trims (perimeter)
Key characteristics:
- Up to three measurement fields (X, Y, Z), each with its own name, unit, range and number of decimals
- One formula over those fields — for example
x * y,x * y / 10000or(x + y) * 2 - The result updates as the customer types, followed by a result unit such as
m² - Priced like other option types: No pricing, Add fee or Link variant
- The cart line lists the measurements and the result — e.g.
Size: 120 cm, 80 cm (0.96 m²) - Can be used as a condition source, compared against the calculated result
- Fully stylable via per-type templates (see Formula Styling)
The formula calculates a size, not a price
The formula's result is a measurement. A fee, or a linked variant's price, is charged in full whatever size the customer enters, so a 1 m² order and a 3 m² order pay the same for this option. If larger sizes should cost more, add a priced option, such as "Oversize surcharge", and show it with a condition like result is more than 2.
Configuration
Basic Settings
| Setting | Description |
|---|---|
| Label | Option name displayed to customers (e.g., "Size"). Also the name of the cart line property |
| Option is required for this option set | If enabled, customers must enter their measurements before adding to cart |
| Hide Label from storefront | If enabled, only the measurement fields are shown (label is hidden) |
Measurements
The option has three field cards, Field X, Field Y and Field Z. Each card has a checkbox that turns the field on or off, and a badge that reads On or Off. X and Y start on and Z starts off.
The settings below appear on each card while the field is on:
| Setting | Options (default) | What it controls |
|---|---|---|
| Measurement name | text, up to 255 characters (empty) | The field's name for the customer, e.g. Width. Required while the field is on. Placeholder: Enter a name (e.g., Width, Height, Length) |
| Unit | text, up to 8 characters (empty) | Shown next to the field and on the cart line, e.g. cm. In-app help: Shown next to the field. Display only — no conversion is applied. |
| Lowest | number above 0 (empty) | The smallest value the customer can enter. Leave empty for no lower limit (the value still has to be greater than 0) |
| Highest | number (empty) | The largest value the customer can enter. Must be greater than Lowest. Leave empty for no upper limit |
| Default | number (empty) | The value the field starts with. Must be between Lowest and Highest and fit within Decimals |
| Decimals | whole number 0–6 (2) | How many decimal places the customer can type. 0 allows whole numbers only |
| Required | checkbox (on for X and Y, off for Z) | In-app help: Fields used in the formula must be required, so a blank entry can never be treated as zero. |
At least one field must be on. Turning a field off keeps its settings, so they're still there if you turn it back on.
A Default is a real answer
A field with a Default starts filled in on the product page. A customer who never touches it orders that size, and on a priced option pays for it. Leave Default empty if you want every customer to enter their own measurements.
Which fields need to be required: every field the formula uses must have Required ticked, otherwise the option set won't save. A field the formula doesn't use can be optional, for example a "Notes on fitting" depth the workshop wants to see but that doesn't change the result.
Formula
| Setting | Options (default) | What it controls |
|---|---|---|
| Formula | text (x * y) | The calculation. Use x, y and z for the fields that are on, numbers (with a dot as the decimal separator), + - * / and brackets |
| Result unit | text, up to 8 characters (empty) | Shown after the result, e.g. m². In-app help: Shown after the calculated result, for example m². |
Above the Formula box, buttons insert x, y and z (only for fields that are on) and +, -, *, /, ( and ). You can also type the formula. Upper-case letters work too (X * Y). Under Result unit, Quick add buttons insert m², cm², ft², m³, ² and ³, since superscripts are hard to type.
The formula can only do arithmetic: there are no functions such as min, max or round, and no powers (^). To square a value, write x * x.
Example formulas:
| Formula | Gives |
|---|---|
x * y | Area in the fields' own unit (cm × cm = cm²) |
x * y / 10000 | Area in m² from centimetre fields |
x * y / 144 | Area in ft² from inch fields |
x * y * z / 1000000 | Volume in m³ from centimetre fields |
(x + y) * 2 | Perimeter, e.g. the length of a frame |
x | One measurement on its own, e.g. a length of fabric |
Units are never converted
The Unit and Result unit fields are labels only. If customers enter centimetres and you want the result in square metres, the formula has to do the conversion: x * y / 10000, not x * y. Forgetting the conversion is the most common setup mistake. The result is 10,000 times too big, and so is any threshold you compare it with in a condition.
Example: under the pricing settings, an Example box works the formula through with each field's Default (or its Lowest, or 1 if neither is set), so you can check it reads the way you meant. For example, 120 × 80 ÷ 10000 = 0.96 m², followed by Price: 20.00 when the option has a fee.
Pricing
Formula uses the same pricing control as other option types:
| Pricing | What the customer is charged |
|---|---|
| No pricing (default) | Nothing. The measurements and result are still recorded on the cart line |
| Add fee | The amount you enter, at most 2 decimal places |
| Link variant | The linked variant's price |
The price doesn't change with the measurements. It's charged for each unit of the product, so a cart line with a quantity of 2 is charged twice. Allow separate quantity isn't offered for this type.
If you change the price of the linked variant, or of the fee product the app creates, in Shopify, the Formula option picks up the new price. See Price Add-Ons for how fees and linked variants work.
Advanced Settings
| Setting | Description |
|---|---|
| Internal Label | Admin-only identifier (replaces label in the options list) |
| Help Text | Additional guidance shown to customers (based on display mode) |
| CSS class | Your own class name(s) on this option's container — see CSS Class & CSS ID |
| CSS ID | Your own HTML ID on this option's container — see CSS Class & CSS ID |
Fields per row isn't an option setting. How the fields are laid out, including on phones, is part of Formula Styling.
Validation
Field Settings
Saving is blocked, with the message on the field that needs fixing, when:
| Message | Cause |
|---|---|
| Enable at least one measurement field. | All three fields are off |
| Enter a name for this measurement. | A field that's on has no Measurement name |
| Lowest value must be greater than 0 — zero is never a valid measurement. | Lowest is 0 or negative |
| Highest value must be greater than the lowest value. | Highest is equal to or below Lowest |
| Default must be greater than 0. | Default is 0 or negative |
| Default must not be below the lowest value. / Default must not be above the highest value. | Default is outside Lowest–Highest |
| Default has more decimal places than this field allows. | Default has more decimals than the field's Decimals |
| Decimals must be a whole number between 0 and 6. | Decimals is outside 0–6, or not a whole number |
| No value fits between the lowest and highest values at this number of decimals. | For example, Lowest 0.5 and Highest 0.9 with Decimals 0 |
| Field X is used in the formula, so it must be required. Otherwise a blank entry would have no value to calculate with. | The formula uses a field that isn't Required |
Formula
The formula is checked as you type, and saving is blocked while it has an error:
| Message | Example |
|---|---|
| Enter a formula. | The Formula box is empty |
| The formula uses "w", which isn't a field. Use x, y or z. | x * w |
| The formula uses field Z, which is turned off. Turn it back on or remove it from the formula. | x * z with Field Z off |
| The formula has unbalanced brackets. | x * (y |
| The formula has an empty pair of brackets. | x * () |
| The formula has two operators in a row: … Remove one of them. | x ++ y |
| The formula is incomplete. | x * |
| Use a dot (.) as the decimal separator, not a comma. | x * 2,5 |
| The formula divides by zero. | x / 0 |
| The formula doesn't use any field, so the measurements wouldn't change the result. Use x, y or z. | 100 |
| With these Lowest and Highest values the formula never gives a result above 0, so no size could be ordered. Change the formula or the field limits. | 5 - x with Lowest 10 |
Unexpected characters (x * y!), invalid numbers (1.2.3) and anything else the formula can't read are rejected with their own message.
Warnings
Some formulas save but fail for certain sizes. For these the editor shows a yellow warning under the formula, with a size that fails. It doesn't block saving:
- Some sizes give a result of 0 or less — for example … gives …. Shoppers who enter such a size see an error and can't add to cart. (e.g.
x - y, when Y can be bigger than X) - Some sizes can't be calculated — for example … divides by zero. Shoppers who enter such a size see an error and can't add to cart. (e.g.
x / (y - 5))
Tighten Lowest and Highest, or change the formula, if those sizes shouldn't be possible.
How to Add a Formula
- Navigate to Option Sets and open your option set
- Click Add Option
- Select Formula from the Option Type modal (it's under the Input category)
- Enter a Label (e.g., "Size")
- Under Measurements, fill in Measurement name, Unit, Lowest, Highest and Decimals for each field you need, and turn on Field Z if you need a third measurement
- Under Formula, build the formula with the buttons or type it, and set a Result unit
- Check the Example box: the worked calculation should give the result you expect
- (Optional) Set Pricing to Add fee or Link variant
- (Optional) Click Advanced Settings to add an Internal Label or Help Text
- (Optional) Click Style Settings to assign a Formula template
- Click Save in the contextual save bar
On the Storefront
What customers see:
- One input per field that's on, with its name above and its unit inside the box. Without a template the fields sit side by side with
×between them, and stack one per row on screens 480px wide and under - A range hint under each input, built from Lowest and Highest:
10–300 cm,10+ cm(no Highest) or≤ 300 cm(no Lowest) - Under the fields, the heading Calculated result and the result, updating as they type:
0.96 m², or0.96 m² (+$20.00)when the option is priced. The result shows at most 4 decimal places - Until the measurements give a valid result (while a field is empty, or a value is out of range), a prompt instead of the result: Enter your measurements to see the result
On phones the inputs bring up a numeric keypad. If a field gets too narrow for its value, the fields wrap onto more rows instead of squeezing.
The layout, the heading, the prompt, where the unit and range hint go, and whether the readout shows at all are all part of Formula Styling.
Required and optional options:
- With Option is required on, the customer has to fill in every required field before adding to cart
- With it off, the customer can leave every field blank and add to cart, and the option isn't added to the cart line. But once they fill in one field, the other required fields have to be filled in too, so a half-entered size is never dropped silently
Error Messages
Errors appear when the customer leaves a field or presses Add to cart, and clear as soon as the value is fixed. Add to cart is blocked while any of them shows:
| Message | When |
|---|---|
| Enter a value | A required field is empty |
| Enter a value greater than 0 | The value is 0 or negative |
| Enter a number | The value isn't a number, e.g. abc |
| Enter 10 or more | The value is below Lowest (here 10) |
| Enter 300 or less | The value is above Highest (here 300) |
| Use at most 2 decimal places | The value has more decimals than the field allows (here 2) |
| Use a dot (.) as the decimal separator | The value uses a comma, e.g. 12,5 |
| These measurements can't be calculated. Check the values. | The sizes entered give a result of 0 or less, or can't be calculated (see Warnings) |
Spaces around the number, leading zeros and trailing zeros are accepted: 12, 0012 and 1.50 with 1 decimal all work. The empty field is never treated as 0.
These messages are always shown in English. They aren't in Language Settings yet.
Cart Properties
The measurements and the result are added to the cart line as one property named after the option's label. Measurements are separated by commas, with the result in brackets:
- Option Size,
120cm and80cm, result unitm²→ Size: 120 cm, 80 cm (0.96 m²) - No result unit → Size: 120 cm, 80 cm
- No field units → Size: 120, 80 (0.96 m²)
An optional field the customer left blank is left out. The property is there with No pricing too, so the measurements reach the order and the packing slip either way.
Edit in Cart opens the option with the measurements the customer bought, not the defaults, and keeps the price unchanged unless they change something.
Conditions
A Formula can be the source of a condition. The condition is checked against the calculated result, not against a single measurement:
| Comparator | Meaning |
|---|---|
| is | The result equals this number |
| is not | The result is anything but this number |
| is more than | The result is greater than this number |
| is less than | The result is less than this number |
Comparisons are strict: is more than 2 matches a result of 2.01 m², not 2 m². A rule doesn't match while the customer is still filling in the measurements.
is empty and is not empty aren't offered. Every field the formula uses is required, so the result is always there once the option is filled in.
Pick a threshold the result can reach
The value isn't checked against your field limits. A rule like is more than 5000 on an option whose result tops out at 9 m² saves without complaint and never matches, which is usually a sign the formula is missing its / 10000.
When a Formula is the target of a condition (the option being shown or hidden), the whole option is shown or hidden; there's no value to pick.
Styling
Formula has its own dedicated styling: how the fields are grouped and laid out, where units and labels go, stepper buttons, and how the result is displayed. All of it is set through named templates.
See Formula Styling for the full settings reference, and Sandbox & Live Preview for previewing test measurements while you style.
Use Cases
Roller Blind
Label: Blind size Field X: Width, cm, 30–300, 0 decimals Field Y: Drop, cm, 30–250, 0 decimals Formula: x * y / 10000, result unit m²Pricing: Add fee (a measuring and fitting fee)
Result: Customers enter their window size and see the blind's area. The cart line reads "Blind size: 120 cm, 150 cm (1.8 m²)"
Carpet Runner
Label: Runner length Field X: Length, m, 0.5–20, 1 decimal Field Y: off Formula: x, result unit m
Result: A single measurement, with its own range hint 0.5–20 m
Shipping Crate
Label: Crate size Fields: Width, Height and Depth, all cm, 10–200 Formula: x * y * z / 1000000, result unit m³
Result: The crate's volume in cubic metres. Add a condition, Crate size is more than 1, to show a "Freight delivery" option for large crates
Picture Frame
Label: Artwork size Field X: Width, cm, 10–150 Field Y: Height, cm, 10–150 Formula: (x + y) * 2, result unit cm
Result: The length of moulding the frame needs. Pair it with a condition, Artwork size is more than 400, to show a "Reinforced corners" add-on
Best Practices
Set honest limits:
- Set Lowest and Highest to the sizes you can actually make. They are the customer's only guard against typos like
1200instead of120 - Use Decimals
0for whole millimetres or centimetres. Allow decimals only where customers really measure in fractions
Name fields the way customers measure:
- "Width" and "Drop" for blinds, "Width" and "Height" for frames
- Put the unit in Unit, not in the name, so it follows the value on the cart line
Check the formula with the Example box:
- Set a realistic Default (or Lowest) on each field and read the worked calculation
- If the result is thousands of times too big, the unit conversion is missing
Explain what's measured:
- Use Help Text for "measure inside the window frame" or "round up to the nearest centimetre"
Price sizes with conditions:
- The fee is the same for every size, so use conditions on the result to show size-band surcharges
Troubleshooting
Can't save — "Field X is used in the formula, so it must be required": tick Required on that field, or take it out of the formula
Can't save — "The formula uses field Z, which is turned off": turn Field Z back on, or remove z from the formula
The result is far too large: the fields are in cm and the result unit is m², but the formula doesn't divide by 10,000. See Units are never converted
The price doesn't change when the size changes: this is expected. The formula calculates a size, and the fee is flat. See the warning in the Overview
Customers see "These measurements can't be calculated": some sizes within your limits make the formula give 0 or less, or divide by zero. The editor shows a warning with an example size. Tighten Lowest and Highest, or change the formula
A condition on the result never fires: check the threshold against the result unit. With x * y on cm fields the result is in cm², so a 2 m² threshold is 20000
Related
- Formula Styling — field layout, units, labels, steppers and the result display
- Sandbox & Live Preview — preview test measurements while styling
- Number — a single free-entry number
- Slider — pick one number from a fixed range by dragging
- Condition Types — using a Formula's result as a condition source
- Price Add-Ons — how Add fee and Link variant work
- Cart Property Display — how properties show on the cart line