Show/hide box depending on product variant

Highlighted
New Member
2 0 0

Hello,

I have read answers to similar topics but didn't find a working answer for my store this is why I am asking this here.

I sell handmade baby products and I want to offer my customers the possibility to embroider their child's names. For that I have created two variants (with or without name) with two different prices. I already have a box where customers can add their text as shown below: (in pink are the two options' names)

Capture d’écran 2020-08-17 à 00.31.09.png

Now, I would like to show the text box only if the first variant (with name) is selected, I would also like the box to have text like "write name here" when empty (in a greyish color as it is often the case in online forms).

My code for the box is this:

 

{% if template contains 'custom-1' %}

<p class="line-item-property__field">
<label for="monogram">Faites broder le prénom de votre choix :</label>
  <br>
<input required id="monogram" style="width:120px; max-width:100%;" type="text" name="properties[Monogram]">
</p>

<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
</style>

 

 

 

 

custom-1 is a custom product template I use for customizable products only.

I am actually unable to code myself, all this comes from online tutorials. All I can do is copy and paste in the right place haha.

I am using Brooklyn theme.

Thank you very much for helping me through this

0 Likes
Highlighted
Shopify Partner
1023 214 463

@Juliette-B 

 

Yes, It's possible to fix it but requires some custom code.

Just send me direct mail, I will help you to fix it.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
Highlighted
Astronaut
1085 177 213

@Juliette-B 

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
2 0 0

Hello,

you can find my store here.

You can check a test product here with a custom variant and a text box that is always shown.

Password is : Marius

Also, do you think there is a solution that would work for ALL my products without having to add code to each customizable product ? Because I thought that I could put some condition like "If variant is "custom.variant." then show the text box. But for that I would have to put a different variant ID in the code since every product variant has it's own ID from what I understand.

Thank you very much for taking time to answer me !

PS: Don't mind the pictures on the site they are just test pics

0 Likes