Using an if command to disable a button on selection

[awesomeetch]

Ok so basically I have

{% if product.selected_variant == 'text' %}
<label> 1st side text </label>
<input required type = "text" id="custom-side1-name" form="{{ product_form_id }}" name="properties'[]"[Your Name] />
{%- endif -%}

It is a custom engravable cup website where I would like to be able to turn off a text box input if I select the option monogram.

Anyone have the same problem/know what to do?

[TypicalTomo]

Hi there!

You will need JavaScript for this that will show/hide the text input depending on the variant. The solution really depends on the rest of the theme code. I would advice hiring a developer to perform this.

If hiring a developer is not an option, then I would advice that you separate monogrammable products from the ones that are not monogrammable. Once that is done, follow these steps (note that these steps are made for the Dawn theme):

1. Open the code editor for your live theme.
2. Click on 'Add a new template'. A new popup will appear. Fill it like this:
   
3. Click on 'Done'.
4. Find main-product.liquid in the sidebar on the left under the sections folder. Click on it to open.
5. Once the main-product.liquid is open in your editor view, press Ctrl+F and enter 'add-to-cart-form' in the find field. Press Enter and the editor should jump on the line like this:
   
6. Below this line, press Enter to add a new line of code and paste this code (it is your code, just a bit modified):

{% if template.suffix == 'monogramming' %}
                      <label for="custom-side1-name">1st side text</label>
                      <input required type="text" id="custom-side1-name" name="properties[Your name]" />
                    {% endif %}​

• Once pasted, click on green 'Save' button in the top right corner.
•  Now, in your Shopify dashboard, open the product that needs to be monogrammable (remember, they should be separated from the non-monogrammable ones in this solution). Once there, scroll a bit down and in the right sidebar you will find the block named 'Online store' with the 'Theme template' field. Change it to 'monogramming' so it looks like this:
  
• Click on 'Save'. Your product should now have a monogram text field. In your orders, it will be shown as 'Your name'.

The main con of this approach is the separation of the products. The other problem is that monogrammable products can still be submitted without any name entered.

If you need a more custom solution, please message me directly.