Hide or show Custom Text Box Based On Selected Variant Dawn Theme Variant Pills

Shopify Discussion

Topic summary

A user seeks to conditionally display a text field and dropdown menu based on which variant pill is selected in Shopify’s Dawn theme. Specifically, these custom inputs should appear when the second variant is chosen and hide when the first variant is selected.

Proposed Solutions:

  • Metafield approach: Create a variant-level true/false metafield combined with custom theme code to control visibility
  • JavaScript requirement: Multiple respondents confirm that Liquid/HTML alone won’t suffice—JavaScript is necessary to listen for customer input changes
  • Detailed implementation: One user provides step-by-step code including:
    • Adding HTML for the text box and dropdown in sections/main-product.liquid
    • Inserting JavaScript that listens for variant selection changes and toggles display based on which option (index 0 or 1) is selected

Current Status:
The discussion remains open with the original poster seeking clarification on implementation details. One respondent requested additional product information to provide tailored advice. The user has been searching for a solution for over two months.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

I use dawn theme and use the standard variants that Shopify offers. I want to have a text field and a drop down menu to be shown when the the second variant pill is selected. When the first variant pill is selected, the text field and the drop down menu should be hided. I don´t know how to implement this logic and where I have to put the code… I am searching for a solution for over 2 months now :disappointed_face:

I would be very happy if anyone could help me :slightly_smiling_face:

1 Like
2

Hi @porsche334 ,

To achieve this you should create a metafield at variant level type of true/false then custom code in theme.

To hide show the input field.

Hope it will help…

3

Thank you for your answer :slightly_smiling_face: can you tell me what the custom code would look like ?

4

Hi @porsche334

You have to listen to the customer’s input. A liquid or html code will not be enough to do this. Unfortunately, you need a developer to write the javascript code for this.

5

Hi @porsche334 ,

Could you give me some info about your product, like its options and variants? And how do you handle its inventory? Also, if you could let me know how many products in your store need that custom text field and dropdown, I can give you some advice :hugs: .

6

Add the HTML for Text Box & Dropdown

- In Dawn, the variant pills are inside the main-product.liquid section.

  • Go to your Shopify Admin → Online Store → Themes → Dawn → Edit code

Open:
sections/main-product.liquid

Find this part (around where variant pickers are generated):
{%- when ‘variant_picker’ -%}

Just after the closing tag of the variant picker, add your custom inputs:

<div id="custom-inputs" style="display:none; margin-top: 15px;">
<label for="custom-text">Custom Text:</label>
<input type="text" id="custom-text" name="custom-text" placeholder="Enter text here"> <label for="custom-dropdown" style="display:block; margin-top: 10px;">Custom Option:</label>
<select id="custom-dropdown" name="custom-dropdown">
<option value="">-- Please choose an option --</option>
<option value="option1">First Option</option>
<option value="option2">Second Option</option>
</select>
</div>

Add the JavaScript to Show/Hide Based on Variant

Scroll to the bottom of the same main-product.liquid file and just before or the ending {% schema %}, add this script:

document.addEventListener("DOMContentLoaded", function() {
const customInputs = document.getElementById("custom-inputs");
// Listen for variant changes
document.querySelectorAll('input[name="options[Size]"], input[type="radio"][name^="options["]').forEach(function(variantOption, index) {
variantOption.addEventListener("change", function() {
// If second variant pill is selected, show; else hide
if (index === 1 && variantOption.checked) {
customInputs.style.display = "block";
} else if (index === 0 && variantOption.checked) {
customInputs.style.display = "none";
}
});
});
});