*Almost working - Showing a line item based on a variant option

Hello world!

I am very new to Shopify and testing things out to see if I can accomplish what I want. I am currently on a trial version.

The issue: I have a text box that I want to display only if a customer chooses “Yes” on a customization question. I have almost accomplished this. The box shows/hides depending on the variant, but doesn’t toggle properly if the variant is changed on the page.

Pertinent facts:

Site is https://testnook.myshopify.com/password

pw: pleasehelp

Variant url showing the text box: https://testnook.myshopify.com/products/phone-grips-gold?variant=37811571785914

Variant url hiding the text box: https://testnook.myshopify.com/products/phone-grips-gold?variant=37811571753146

The problem is, if you toggle the option while on the page, the text box doesn’t change.

I think it is something needed in theme.js, but I’ve been trying different code iterations for hours and my eyes are crossed at this point. I’m throwing a hail Mary to you guys!

Other considerations:

I do not want to use a separate app.

My yes/no variant has to be a Shopify option rather than a custom line item because it affects price.

My selector option id may not always be the same. Depending on the item, there may be multiple dropdowns and I can’t depend on myself to always add X first, etc.

Here is the code nugget I used to accomplish what I have:

File: product-customizable-template.liquid

Code:

{% for product_option in product.options_with_values %}
{% if product_option.name contains “Personalization” and product_option.selected_value == “Yes” %}

What customization would you like on your item?

{% else %} {% endif %} {% endfor %}

I also tried adding the following above this code, but it did not change anything:

Thank you to everyone/anyone for your help!

I am using the Debut theme.