Hiding Custom Text Box Based On Selected Variant

Shopify Discussion
1

Hi guys,

I was wondering if anyone can help me out with a code for making the custom Text Box on the product page only popping up when a certain variant is selected. I want to offer an optional personalization for my products which is a custom embossing. So I have created a variant Personalization with the select options Yes or No. This is the code I have used for that.

Personalization

I´ve also made the Text Box mandatory/required to be filled out before adding the product into cart. So what I need is the Text Box to appear only when the variant Personalization is selected as Yes (and then the Text Box to be mandatory to be filled out). If the variant Personalization is selected as No, then the Text Box shouldn´t be visible at all (and shouldn´t be mandatory).

Here´s the link to a product so you´d see what I´m talking about.

https://indie-me.com/products/tablet-and-laptop-leather-case?variant=42869158674669

Would be very greatful for every tip, thanks.

2

Hello @Merle_R ,

You can achieve that by using a script that can set the requirement of the input field based on the selected value and hide it as well.

What you have to do first is to remove the word required inside the input tag.

Then, add an id “hidden_div” to the input div. And make sure to make its style display: none;

After that, add this line inside the select tag: onchange=“showDiv(‘hidden_div’, this)”

And use this script inside the product page:

3

Hi @joker7 ,

thank you for your response. Unfortunately I didn´t seem to get it work. Not sure if I´ve entered something in the wrong spot or what´s the problem.

So I´ve entered the onchange=“showDiv(‘hidden_div’, this)” under select tag.

<select id="Option-{{ section.id }}-{{ forloop.index0 }}" class="select__select" name="options[{{ option.name | escape }}]" form="{{ product_form_id }}" onchange="showDiv('hidden_div', this)"

And made the changes in the input tag..

Personalization

And added the script on the top in the main product tag (not sure if correct?)

{{ 'section-main-product.css' | asset_url | stylesheet_tag }} {{ 'component-accordion.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {{ 'component-rte.css' | asset_url | stylesheet_tag }} {{ 'component-slider.css' | asset_url | stylesheet_tag }} {{ 'component-rating.css' | asset_url | stylesheet_tag }} {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }} {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

Sorry, I have no knowledge about coding so I´m not sure what I´ve done wrong here. Maybe you can spot the mistake?

4

Hello @Merle_R ,

Unfortunately, you made some mistakes. Now the code is a little bit messy.

Please DM me so we can get this done faster.

5

Hi,

I’m trying to do something similar but I would like for the text box to appear after a checkmark was used. So I have the checkmark already coded but I have no idea how to have the text box appear after it’s been checked. The checkbox is asking if it’s a gift, and the textbox would ask for a Gift message. Could you help me with that? I tried to simulate what u explained above and shopify broke haha. Thanks in advance.

6

Hello @joker7 I want a solution something like this. I have size variations in a product like S, M, L & “Custom”. I want to display a custom text box when someone clicks on Custom size variation & hide when clicking on S, M, L, size, etc.
This is my text field code

Custom Size
7

Hello @Miraza606-Ozbix ,

Could you please send me the link of the page so I can take a look at it?

8

Hello, Do you have a solution? i have the same Problem.

9

@Hakelz The solution is in my first comment. If you tried it and it’s not working for you or if you don’t know how to implement it please send me the link to your store so I can take a look at it and help you implement the solution.