Why conditional logic matters
Compare two personalizer product pages selling a custom mug:
Without conditional logic (everything visible):
- Text input: "Front side text"
- Text input: "Back side text"
- Photo upload: "Front photo"
- Photo upload: "Back photo"
- Checkbox: "Add gift wrap"
- Text input: "Gift message"
- Checkbox: "Rush production"
- Date picker: "Delivery date"
Customer sees 8 fields. Overwhelming. 30-40% abandon.
With conditional logic:
- Checkbox: "Add front text" → shows Text input if checked
- Checkbox: "Add back text" → shows Text input if checked
- Checkbox: "Add photo" → shows Photo upload if checked
- Checkbox: "Add gift wrap ($5)" → shows Gift message if checked
- Checkbox: "Rush production (+$25)" → shows Date picker if checked
Customer sees 5 initial checkboxes. Progressive disclosure. Each subsequent field appears only when relevant. 15-25% conversion lift on complex products.
3 conditional patterns
Pattern 1: Show/hide single field
Simplest form. "Show Engraving Text field if 'Add Engraving' checkbox = checked." Most common — 70% of use cases.
Pattern 2: Show/hide field group
Multiple fields hidden together. "Show Wedding Section (bride name + groom name + date + venue) if Product Type = 'Wedding Invitation'." Prevents cluttering a product page with fields relevant to only one variant.
Pattern 3: Cascading dropdowns
Second dropdown's options depend on first dropdown's value. "Select Category first → Style options populate accordingly." Standard config UX for complex products (jewelry with metal → karat, apparel with brand → size chart).
Setup with Print It My Way Pro (5 minutes)
- Install Print It My Way Pro tier ($13.99/mo — conditional logic requires Pro)
- Dashboard → New Personalizer
- Add all fields (controlling + dependent)
- Click the dependent field → Conditional Logic tab
- Add rule: "Show if [Controlling Field] equals [Value]"
- Save + attach to product
- Test in preview mode — toggle controlling field, verify dependent shows/hides
AND / OR / NOT compound rules
Simple rules cover 80% of cases. For complex logic, personalizer apps support compound rules:
| Logic | Example rule | Meaning |
|---|---|---|
| Single | Show if A = yes | Standard on/off toggle |
| AND | Show if A = yes AND B = red | Both conditions must be true |
| OR | Show if A = yes OR B = premium | Either condition true |
| NOT | Show if A != no | Show unless specifically excluded |
| Nested | Show if (A = yes AND B = red) OR C = urgent | Grouped logic — parentheses matter |
Print It My Way Pro supports single + AND + OR + NOT. Unlimited tier adds nested parenthesized rules. Bold Product Options supports similar patterns at $14.99+/mo.
Common use case: Wedding invitation
Wedding invitations have variable data based on ceremony style:
- All invitations: Bride name, Groom name, Wedding date, Venue name
- Traditional weddings: Add "Reception at [venue]" section
- Destination weddings: Add "Travel details" section
- Elopement: Hide reception + travel; add "Guests: intimate ceremony" note
Setup:
- Dropdown: "Ceremony style" = Traditional / Destination / Elopement
- Show "Reception venue" text field if Ceremony style = Traditional
- Show "Reception time" text field if Ceremony style = Traditional
- Show "Travel details" text field if Ceremony style = Destination
- Show "Return by date" text field if Ceremony style = Destination
- Show "Intimate note" text field if Ceremony style = Elopement
Customer picks style; only relevant fields appear. Print file generation adapts based on style variant.
Common use case: Corporate gift branded product
- Checkbox: "Add company logo" → shows Logo Upload field
- Checkbox: "Add company name text" → shows Company Name text field + Font dropdown
- Checkbox: "Add employee names (per-unit personalization)" → shows Repeater field with quantity + name per unit
- Checkbox: "Gift box packaging (+$5/unit)" → shows Gift Card Message text field
Customer picks which branding elements they want. Each choice triggers relevant follow-up fields.
Common use case: Photo canvas with framing
- Photo upload field (always visible)
- Aspect ratio dropdown: Square / Portrait / Landscape
- Show canvas size dropdown filtered by chosen aspect ratio (cascading)
- Radio: "Framed or Unframed?" → if Framed, show Frame Color dropdown (Black / White / Natural / Espresso)
- Checkbox: "Add mounting hardware" → shows Mount Type dropdown
Only relevant options appear based on customer's earlier choices.
Cascading dropdowns setup
Second dropdown depends on first. Two implementation approaches:
App-based (recommended)
Personalizer app filters second dropdown's options based on first's value. Configure in app dashboard: "For each value of Category, define the allowed Style options." No code required.
Custom JavaScript (advanced)
const cascadeMap = {
'Necklace': ['Silver Chain', 'Gold Chain', 'Rose Gold Chain'],
'Ring': ['Sterling Silver', '10k Gold', '14k Gold', '18k Gold', 'Platinum'],
'Bracelet': ['Silver Bangle', 'Gold Bangle', 'Leather Cord', 'Rope']
};
document.getElementById('category').addEventListener('change', (e) => {
const category = e.target.value;
const styleSelect = document.getElementById('style');
styleSelect.innerHTML = '';
cascadeMap[category].forEach(option => {
const opt = document.createElement('option');
opt.value = option;
opt.textContent = option;
styleSelect.appendChild(opt);
});
});Works on any theme but requires ongoing maintenance if catalog changes. App-based approach preferred for merchants without developer resources.
Handling filled dependent fields when parent changes
Common UX question: customer fills the engraving text, then unchecks "Add engraving" — what happens to their text?
Three approaches, ranked by UX quality:
- Preserve in memory (best): text hidden but not cleared. If customer re-enables, their text is still there. Print It My Way default.
- Confirm before clearing: modal "This will clear your engraving text. Continue?" Some merchants prefer this to prevent accidental data loss.
- Silent clear: text discarded immediately. Simplest to implement but worst UX — customer's work vanishes.
Performance considerations
Conditional logic evaluates on every field change. Modern implementations are sub-5ms overhead:
- Rules stored as JSON in app config
- Client-side evaluator library ~5 KB minified
- Runs on every input change event
- No noticeable lag up to 50+ conditional rules per personalizer
Print It My Way's rule engine is under 3 KB gzipped. Bold's is slightly larger but still under 10 KB. Custom JS implementations vary — avoid heavy state management frameworks for simple show/hide logic.
Cascading pricing (conditional + Cart Transform)
Conditional logic controls visibility; Cart Transform controls pricing. They combine:
- Hidden field with a fee: fee doesn't apply (field not filled)
- Visible field with a fee: Cart Transform reads value + applies fee
Example: "Add gift wrap" checkbox (+$5 via Cart Transform). When unchecked, checkbox is hidden or off — fee = $0. When checked, fee = $5. Automatic through the combination of conditional visibility + Cart Transform rule.
App comparison
| App | Conditional logic support | Compound rules | Cascading dropdowns | Entry price |
|---|---|---|---|---|
| Print It My Way Pro | Yes | AND/OR/NOT + nested (Unlimited) | Yes | $13.99/mo |
| Bold Product Options | Yes | AND/OR | Yes | $14.99/mo |
| Hulk Product Options | Basic | Single only | Limited | $8.90/mo |
| Fancy Product Designer | Yes | AND/OR | Yes | Mid-market |
| Zakeke | Yes | AND/OR | Yes | ~$29.99/mo |
Common issues + fixes
| Issue | Cause | Fix |
|---|---|---|
| Field doesn't show when controlling checkbox checked | Rule references wrong field name or value | Verify exact field name + value (case-sensitive) in rule config |
| Nested rule not evaluating | Missing parentheses in compound rule | Explicitly group: (A=yes AND B=red) OR C=urgent |
| Filled field's data lost when hidden | Silent clear behavior | Enable "Preserve in memory" in app settings |
| Cascading dropdown shows stale options | Second dropdown not re-populated on parent change | Verify change event fires; check console for JS errors |
| Conditional fee still applied when field hidden | Cart Transform reading raw attribute value | Personalizer should clear attribute when field hidden; verify app does this |
Frequently asked questions
What is conditional logic in Shopify options?
Rules that show or hide fields based on other selections. E.g. "Show engraving text only if 'Add engraving' checkbox is checked." Keeps forms clean without limiting choice.
Best app for conditional logic on Shopify?
Print It My Way Pro ($13.99/mo) — supports AND/OR/NOT + nested rules. Bold Product Options ($14.99+/mo) similar. Hulk ($8.90/mo) basic single-rule only.
Can rules use AND/OR/NOT?
Yes on modern apps. Compound rules like "Show if A=yes AND B=red" or "Show if A=yes OR B=premium". Nested parentheses supported on Print It My Way Unlimited.
Do hidden fields count against page load?
Minimal impact — hidden fields not rendered until shown. Rule engine adds ~3-10 KB gzipped depending on app. Under 5ms evaluation per change.
What happens if customer changes parent after filling dependent?
Best practice: preserve dependent field value in memory, restore if re-enabled. Print It My Way default. Silent clear = worst UX.
How to build cascading dropdowns?
App-based (Print It My Way Pro, Bold): configure allowed second-dropdown values per first-dropdown value. No code. Alternative: custom JS on product page.
Does conditional logic work with variants?
Yes but tricky. Conditional logic hides personalizer fields (line-item properties), not native Shopify variants. For conditional variants, use app-based variant filter.
Can conditional pricing work?
Yes via Cart Transform + conditional visibility combined. Hidden field's fee doesn't apply; visible field's fee does. Automatic through the combination.
Best use case for conditional logic?
Complex products with 8+ fields — weddings, corporate gifting, configurable jewelry. 15-25% conversion lift vs everything visible.
How to test conditional logic?
App's preview mode. Toggle each controlling field; verify dependent shows/hides correctly. Also test on real product page in incognito.
Related setup guides
- Cascading Dropdowns Setup
- Multi-Step Configurator (Wizard)
- Charge Extra Per Option
- Conditional Logic (Overview)
Conditional logic on Shopify
Print It My Way Pro ($13.99/mo) includes conditional logic with AND/OR/NOT rules + cascading dropdowns + preserved field state. Free plan available for testing.
Install Print It My Way