Conditional product options: show a field only when it applies
Long forms lose shoppers. Conditional fields ask only what each order needs, with real examples you can copy.
What a conditional field is
A conditional field appears only when an earlier answer calls for it. Tick “Gift wrap” and a choice of wrapping paper appears. Tick “Add a gift message” and a message box appears. Choose a custom size and the page asks for measurements.
The shopper who doesn’t want those things never sees them. The one who does gets exactly the question that follows.
Why it matters
Every field a shopper reads is a reason to stop. If the page shows the gift message, the back engraving and the measurements to everyone, most shoppers read questions that don’t apply to them, and some leave before they reach Add to cart.
Conditional fields keep the form short for each shopper and still collect everything for the orders that need it. They also keep your orders clean: no empty “Gift message:” lines on orders that had no gift.
Three kinds of condition
Nearly every conditional field uses one of three rules:
- When a field is filled: a checkbox is ticked, or a text box has something in it. “Engrave the inside” ticked shows “Inside message”.
- When a field equals a value: “Wording” set to “My own words” shows a box for the shopper’s own words.
- When a field is anything but a value: a card set to anything but “No card” shows “Card message”.
Patterns from real templates
These come straight from our templates:
- Ring: “Engrave the inside” shows “Inside message”, up to 16 characters.
- Pendant: “Engrave the back” for +$8.00 shows “Back engraving”.
- Coordinates bracelet: “Engraved sides” set to “Front and back” (+$8.00) shows a field for the back.
- Gifts: “Gift wrap” for +$4.00 shows the wrapping paper; “Add a gift message” shows the message.
- Clothing: a size set to “Custom” shows “Measurements”.
- Printing: a design set to “Upload an image” shows the upload; set to “Text”, it shows a text box instead.
- Maps: “Number of places” set to 2 or 3 shows the second and third place, at +$10.00 and +$20.00.
- Memorials: “Wording” set to “My own words” shows “Your words”.
Let shoppers opt out
Conditions also work the other way round. Our “skip personalization” template starts with a “Personalize it” checkbox; only when it is ticked do “Initials” and “Thread color” appear, so a shopper can buy the plain version without wading through fields.
For shoppers who don’t know the details yet, a “details later” setup has a checkbox, “I’ll send the details after checkout”, that hides the name and date fields. You get the order now and the details by email.
Rules for clean conditions
- Ask the deciding question first. A field should only depend on answers above it, so nothing jumps in above where the shopper is reading.
- Don’t charge for what’s hidden. When a priced field disappears, its price leaves the total.
- Don’t require what’s hidden. A required field should only block Add to cart while the shopper can see it.
- Stay one level deep where you can. Chains of conditions are hard to follow, for shoppers and for you.
- Make the trigger clear. “Engrave the back (+$8.00)” says what happens when you tick it.
Write the trigger and the follow-up together
The trigger and the field it opens should read as a pair:
- “Add a gift message” opens “Gift message”.
- “Print my return address (+$10.00)” opens “Return address”, on personal stationery.
- “Add birth stats (+$8.00)” opens “Birth stats”, on a baby name blanket.
When the shopper ticks the box, the next thing they see should be exactly what they expected to fill in.
Conditions and prices
Conditions and prices work well together. The price sits on the deciding answer (“Add an edible photo” +$10.00), and the follow-up field (“Photo for the cake”) appears without a price of its own. The shopper sees the cost once, at the moment they choose it.
A choice can also change the prices of another field. In our name necklace template, the chain length prices depend on the metal: an 18 in chain adds $15.00 in gold and $5.00 in silver.
When not to use a condition
- Every shopper needs it. If you can’t make the product without the field, show it from the start.
- It changes the product itself. A different size or material you stock is a variant, not a condition.
- It hides a cost. The answer that adds a price should always be visible; only its follow-up can appear later.
Test it like a shopper
Walk every path: choose, change your mind, choose again. Check that the total follows, that hidden fields don’t reach the order, and that the order in your admin reads clearly. Do it on a phone, where long forms hurt most.
With GMVify
GMVify Custom Product Options shows a field only when an earlier answer calls for it, and can price a choice by another choice, like the chain prices per metal in the name jewelry setup. The templates above come ready with their conditions, so you start from a working form and change the words and prices to yours.
Questions merchants ask
Does Shopify have conditional options built in?
Not for custom fields. Shopify’s product options don’t show or hide other fields; conditional fields come from theme code or an app.
Should a hidden field be required?
No. A field the shopper can’t see shouldn’t block Add to cart.
Can a condition depend on a variant?
Keep conditions on fields where you can. If the follow-up only applies to one variant, it is often clearer as its own product or as a field choice.
How many conditions is too many?
When you can’t explain the form in one sentence. Most products need one or two conditional fields, each one level deep.
Do hidden fields show on the order?
They shouldn’t. Only the fields the shopper could see and fill in should reach the order.
Can a conditional field have its own price?
Yes, but put the price on the deciding answer where you can, so the shopper sees the cost at the moment they choose it.
