The Visibility Rules demo is a small calculator where the form changes as the shopper fills it in. It runs on Appify Custom Product Options.
Pick Large and the Area input fills itself with 21 and accepts only 21 to 50. Choose Upload Now and an image upload appears. Switch the proof switch on and the Address field becomes required. This article explains the two rule types behind that first, then how the demo uses them.
What does the Visibility Rules calculator do?
It shows no price logic at all. Every rule in it is there to keep the form short and the answers usable. The shopper sees three groups of fields, each under its own heading: one that limits allowed values, one that hides and shows options, and one that requires fields only when they matter.
On first load only the essentials are on screen. Everything else waits for the choice that needs it.
What are visibility rules and value rules?
Every option in the calculator has two rule tabs. Visibility Rules decide whether an option is shown, hidden, required or restricted. Value Rules decide what an option is set to, so a field can fill itself or lock.
A rule is a condition plus an action. The condition reads another option, a Shopify product option such as Color or Size, or a pricing variable, and combines conditions with All, Any or None. The rule conditions page lists the operators.
One option can carry several rules, so a single input can be limited by size, filled by size and shown only when another choice is made.
Which rule for which job?
| You want | Use |
|---|---|
| A field that appears only in certain cases | Show if (or Hide) |
| A field that is optional until a choice makes it necessary | Require |
| A number or text input kept inside a range that depends on another choice | Limit |
| A shorter list of choices depending on another choice | Hide values or Show value(s) if |
| A field that fills itself, or is locked to a value | A value rule, set to Once or Lock while matched |
| A different price when a choice is made | Conditional pricing rules |
The guide to showing and hiding product options covers every action in depth. This article looks at one finished calculator that uses three of them, plus value rules.
Why is a form like this hard to build, and how is it handled?
- The allowed range depends on another choice. A small item and a jumbo item cannot share one range. A Limit rule on the Area input sets a different minimum and maximum for each size.
- The shopper should not have to guess the range. When the size changes, a value rule fills Area with the lowest allowed number, and a text block under it states the range.
- Not everyone has artwork ready. The upload only shows when Upload Now is chosen, so shoppers sending artwork later never see it.
- A field is needed only some of the time. Address is optional until the proof switch is on, then it is marked as required.
- Hidden fields must not reach the order. A hidden option is removed from the layout, and its value is left out of pricing and cart data.
- The choices have to survive the order. The customer can change them from the cart with Edit options.
How does one order move through the form?
Take a shopper who wants the Large size, will upload artwork now, and wants a proof.
| Shopper does | The calculator does |
|---|---|
| Picks Large | Fills Area with 21 and shows "Must be between 21 and 50" |
| Picks Upload Now | Shows a file upload that takes images, up to five files |
| Turns the proof switch on | Marks Address as required |
Choose Jumbo instead and the same input takes 51 to 1000. Go back to Small and it takes 1 to 20.
What are the design decisions behind it?
One size choice drives three things
The Size buttons hold nothing but a name. Three Limit rules on the Area input each test the Size choice, and so do three value rules and three on the text block. Change the size and all of them re-check at once.
Ranges that touch but do not overlap
The three bands run 1 to 20, 21 to 50 and 51 to 1000. Each band starts where the last one ends, so every number belongs to exactly one size. The lowest number of each band is what the Area input fills with.
Fill the number, then let the shopper change it
Value rules have two apply modes. Once (auto-fill) sets the value a single time and lets the shopper edit it. Lock while matched keeps the value fixed and disables the control while the conditions hold. The demo fills Area so the first number is always valid, and the Limit rule keeps what the shopper types inside the band.
A message that changes with the choice
The note under Area is a Content block. Value rules write its text, so it can say a different range for each size without a new field. Content blocks take HTML or plain text.
Show if for the upload
The upload has one Show if rule: the Design choice equals Upload Now. When it does not match, the option is hidden. Several Show if rules on one option must all pass, and "A or B" is written as one rule with Any logic.
Require only when it matters
The Address field is optional by default. A Require rule makes it mandatory when the proof switch is on, and the help text under it says so.
Headings, dividers and spacers do the layout
Three headings split the form into its three jobs. Dividers and spacers add the line and the space between them. They are display options, so they collect no input.
What arrives with the order?
The cart line carries the options the shopper actually saw and filled in: size, area, design choice, any uploaded files, the proof switch and the address. A field that a rule hid is not part of the order data. The line also appears in the Orders tab with its options.
A customer who picked the wrong size taps Edit options in the cart. The form reopens with their choices filled in. The guide to editing in the cart has the setup.
How can you make it yours?
- Show a text field for an add-on. A switch labelled "Add engraving?" can reveal an "Engraving text" box, and nothing else on the form changes.
- Shorten a list. Hide values or Show value(s) if trims a dropdown, radio list or swatch set to the choices that fit what the shopper already picked.
- Read the store's own variants. A condition can test a Shopify option such as Color or Size, so a rule can follow the variant picker.
- Combine conditions. One rule with Any logic can show a field for A or for B, and All needs every condition to be true.
- See it on a real product. The blinds calculator setup guide uses the same rules to show the remote and hub options only for a motorized lift.
- Add a price on top. Pair the form with conditional pricing rules so the same choices also change the total.
How do you get this calculator?
Describe it to Chat with AI. It can write visibility and value rules from plain English, and you edit the result on the rule tabs. A starting prompt:
Build a calculator with a Size choice of Small, Large and Jumbo. Add an Area input in square inches that must be 1 to 20 for Small, 21 to 50 for Large and 51 to 1000 for Jumbo, filled with the lowest number when the size changes. Under it, show a note with the allowed range. Add a Design choice of Send Later or Upload Now, and show an image upload only for Upload Now. Add a proof switch, and make the Address field required only when the switch is on.
Check what it builds against the rule tabs. For more on building this way, see AI-assisted setup for Shopify product options.
FAQ
What is a visibility rule on a Shopify product option?
It is a condition plus an action on one option. The action can show, hide, require or limit the option, or filter its list of choices.
Can an option be required only in some cases?
Yes. A Require rule makes an option mandatory only when its conditions match, and it stays optional otherwise.
Can a field fill itself in?
Yes. A value rule can set an option once and let the shopper edit it, or lock it while the conditions match.
Do hidden options show up on the order?
No. A hidden option is removed from the layout, and its value is excluded from pricing and cart data.
Can I write these rules without clicking through the editor?
Yes. Ask Chat with AI in plain English, then adjust the rules on the option's rule tabs.
Ask only what each order needs.
Whatever you sell, however you price it · The last options app you'll shop for