Hide & display a custom text field base on variation selection.

Technical Q&A
, ,

Topic summary

A user needs to conditionally show/hide a custom text input field on a Shopify product page based on size variant selection.

Requirements:

  • Display custom text box only when “Custom” size variant is selected
  • Hide the field when standard sizes (S, M, L, etc.) are selected
  • Position the custom field after the variant picker block

Solution approach:

  • Implement or modify a callback function that triggers on variant option clicks
  • Add conditional logic (show/hide) to the function
  • Target specifically the size variant selection to control field visibility

The discussion includes code snippets for the custom text field markup, though the exact implementation details are partially obscured in the original post.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hello, everyone I have size variations on a product page like S, M, L & “Custom”.

I want to display a custom text box for custom sizing. Customers can write custom size detail when clicking on “Custom” size variation & hide it when clicking on S, M, L, size, etc.
This is my text field code

I want show this code after size variant picker block.

2

Hello @Miraza606-Ozbix ,

Find the callback function or write a new one which will work on click of variant option size only.
You have to just make it conditional (show/hide) so it will work on variant option size and

Thanks