how to have something appear only when checkbox is checked

Highlighted
Excursionist
14 0 5

I am currently using line items to add checkboxes and text boxes onto my product page. is there any way for me to say, have the text boxes appear when a checkbox is checked? I have a coding background but i'm new at shopify, if anyone can point me in the right direction i'd appreciate it!

1 Like
Highlighted
Shopify Partner
4979 736 1607

Hello, @oponn 

Thanks for post .

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
14 0 5

@KetanKumar (is @'ing people here standard? wouldn't want to be rude)

cheernotes.com is the site, I am talking specifically about the product pages at this point. Right now I have radio boxes and a text area box implemented as shown here https://ui-elements-generator.myshopify.com/pages/line-item-property

but I do not know how to change what is shown based off if the checkbox is checked or not. Thanks!

1 Like
Highlighted
Shopify Partner
4979 736 1607

@oponn 

Thanks for details 

sorry, but i can see any checkbox or radio button 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
14 0 5

@KetanKumar 

Sorry I should have specified I had not launched the page with checkbox/ radio buttons yet

the code I am using currently in my test page is a large text box followed by radio buttons for gift message, and font: see below

 

<p class="line-item-property__field">
              <label for="custom-message-optional">Custom message</label>
              <textarea id="custom-message" name="properties[Custom message]"></textarea>
        </p>
        
       
            <p class="line-item-property__field">
              <label>Message Font</label><br>
              <input required class="required" type="radio" name="properties[Message Font]" value="font 1"> <span>font 1</span><br>
              <input required class="required" type="radio" name="properties[Message Font]" value="font 2"> <span>font 2</span><br>
              <input required class="required" type="radio" name="properties[Message Font]" value="font 3"> <span>font 3</span><br>
              <input required class="required" type="radio" name="properties[Message Font]" value="No message"> <span>No message</span><br>
            </p>
 
 
This shows up like this
Screen Shot 2020-05-21 at 1.27.35 AM.png
What I want to do is have a checkbox for something like "I want a custom message" or whatever checkbox which I was going to do with this code:
<p class="line-item-property__field">
  <input type="hidden" name="properties[_Custom message]" value="No">
  <input id="custom-message" type="checkbox" name="properties[_Custom message]" value="Yes">
  <label for="custom-message">Custom message</label>
</p>

Once again, provided by https://ui-elements-generator.myshopify.com/pages/line-item-property

However as you can see right now I have a "no message" option whereas I would want the text area and the font radio buttons to only appear when the custom message checkbox option is ticked, but I do not know how to do that. 

 

A more in depth question would be whether or not I am able to access user inputs such as text or checkbox clicking and using that to decide to show/hide/or do things.

 

Thanks so much for your patience, i should have been more thorough the first few messages!

1 Like
Highlighted
Shopify Partner
4979 736 1607

@oponn 

Sorry for that i don't know what do you want exactly.

but, i have one suggestion if you have used any form elements so please cover to form tag for ex:

<form>
<p class="line-item-property__field">
  <input type="hidden" name="properties[_Custom message]" value="No">
  <input id="custom-message" type="checkbox" name="properties[_Custom message]" value="Yes">
  <label for="custom-message">Custom message</label>
</p>
</form>

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
14 0 5

@KetanKumar 

I have made two pictures to show what I want to happen. I have not used the form tags before, but I will look into it tomorrow when I wake up, especially if you understand what I am trying to do and say that form tags are the way to go.

 

Okay, so lets say on the product page, you just go on and there is a check box, it looks like this:

unchecked.jpg

I want it so that when I check the box, it becomes like this:

checked.jpg

Does that make it clearer? i want it to only show when the first box is ticked. It doesnt necessarily HAVE to be hidden, it could also just be disabled or grayed out. Thanks again for taking the time :)

1 Like
Highlighted
Shopify Partner
4979 736 1607

@oponn 

It can be done by doing some code customization. Please take the help of a developer and hire  Shopify Expert or me

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
14 0 5

Ah I see I did not realize that was a paid service provided. I am not currently in a position to do that and this is also not a crucial feature, I just wanted to learn for myself. Thanks for your time though :)

1 Like
Highlighted
Shopify Partner
4979 736 1607

@oponn 

Best of luck and keep going 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like