Changing Visible Input Boxes Depending On Button Press

Store Design
, ,

Topic summary

Main issue: Show or hide specific text input boxes on a Shopify product page based on the selected product variant (e.g., show only “initials” input for the “front initial” option; show both “initials” and “message” inputs for the other option).

Proposed approach: Use variant-level metafields to control which inputs appear. A metafield is a custom data field in Shopify; at the variant level, store a comma-separated list of input element IDs that should be visible for that variant.

Implementation outline: On variant change, run JavaScript that reads the current variant’s metafield, hides all custom input boxes by default, then shows only those whose IDs match the metafield list. This requires theme edits and custom JS.

Status: No code snippet or step-by-step implementation provided. The responder suggests hiring a developer if the store owner is not comfortable implementing the metafield and JavaScript solution.

Resolution: Not resolved; a feasible method is suggested but remains to be implemented.

Summarized with AI on January 18. AI used: gpt-5.
1

Hello. I have an issue. On our website, we take multiple inputs from the customer. We’re trying to find a way to change the number of textboxes customers can see depending on which variant of the product they pick. For example, on this page:

https://luxeengravable.com/products/bifold-wallet-classic

When the customer has selected the front initial option, only the input box for initials should be present, with both the input boxes for initials and message being visible only when the other option is chosen. How can I hide the message input box when the user has selected the initials only variant of the product?

2

Hi

Input field can be show based on the variant made in admin.

If you are a Developer you can create metafield at variant level and put command separated input id.

Write a JavaScript code to show the related input.

If you are not Developer request you to hire someone or us for the same.