Show/hide box depending on product variant

Juliette-B
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
Tejas_Nadpara
Shopify Partner
1034 215 516

@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

@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

◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes
Juliette-B
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
Everfan
Tourist
6 0 1

Hi @Juliette-B ! Please tell me you found a solution - I've have the exact same issue and have been searching and searching for an answer. Do you mind sharing?

0 Likes