How to Conditionally Hide/Show "Custom Liquid" Fields using code (Prevent Text Input Field Reset)
Hi everyone,
I'm trying to create custom options for a product page in Shopify where the user can select embroidery styles and input custom text for specific product variants. I’ve added dropdown fields and text input fields for the following options:
- Embroidery font style
- Embroidery on the jacket
- Embroidery on the trouser
- Shoulder embroidery
- Karate/Club Style logos
I’ve added custom Liquid code to my theme to show/hide input fields based on the selected product variant. The code is located in snippets/product-variant-picker.liquid, and it works fine in showing the relevant text field when a specific product option (like "Jacket") is selected.
Here’s a snippet of my code:
{% if product.template_suffix == 'custom-options' %}
<!-- Check if the product has an 'Embroidery' option -->
{% if product.options contains 'Embroidery' %}
{% if product.selected_or_first_available_variant.option2 != 'None' and product.selected_or_first_available_variant.option2 != 'Shoulder' %}
<!-- Define Embroidery Font Style dropdown -->
{% assign field_label = 'Embroidery Font Style' %}
{% assign field_values = '-- Please select --,Katakana,Block Letters,Italics' %}
{% assign field_type = 'dropdown' %}
{% assign required_field = false %}
{% assign hide_checkout = false %}
<!-- Field ID and options setup -->
{% assign gen_id = field_label | remove: ' ' | downcase %}
{% assign selection_options = field_values | split: ',' %}
<!-- Dropdown for selecting embroidery style -->
<fieldset class="product-form__input product-form__input--dropdown">
<label for="{{ gen_id }}" class="form__label">{{ field_label }}</label>
<div class="select">
<select id="{{ gen_id }}" name="properties[{{ field_label }}]" form="product-form-{{ section.id }}">
{% for option in selection_options %}
<option value="{{ option | escape }}">{{ option | escape }}</option>
{% endfor %}
</select>
</div>
</fieldset>
<!-- Check if embroidery is on the jacket -->
{% if product.selected_or_first_available_variant.option2 contains 'Jacket' %}
{% assign field_label = 'Embroidery on the Jacket' %}
<fieldset>
<label for="jacket-embroidery">{{ field_label }}</label>
<input type="text" id="jacket-embroidery" placeholder="Enter first or last name">
</fieldset>
{% endif %}
<!-- Check if embroidery is on the trousers -->
{% if product.selected_or_first_available_variant.option2 contains 'Trouser' %}
{% assign field_label = 'Embroidery on the Trousers' %}
<fieldset>
<label for="trouser-embroidery">{{ field_label }}</label>
<input type="text" id="trouser-embroidery" placeholder="Enter first or last name">
</fieldset>
{% endif %}
<!-- Shoulder embroidery options -->
{% if product.selected_or_first_available_variant.option2 contains 'Shoulder' %}
{% assign field_label = 'WKF' %}
{% assign field_values = 'Red embroidery on shoulder,Blue embroidery on shoulder' %}
{% assign selection_options = field_values | split: ',' %}
<fieldset>
<label for="shoulder-embroidery">{{ field_label }}</label>
<select id="shoulder-embroidery">
{% for option in selection_options %}
<option value="{{ option | escape }}">{{ option | escape }}</option>
{% endfor %}
</select>
</fieldset>
{% endif %}
{% endif %}
{% endif %}
<!-- Check if logo option is selected -->
{% if product.selected_or_first_available_variant.option3 != 'No' %}
{% assign field_label = 'Karate/Club Style Embroidery' %}
{% assign field_values = '-- Please select --,Gi-Shingo Ryu,Gi-Aalsgaarde Karate Club,Gi-Hokuto Kai' %}
{% assign selection_options = field_values | split: ',' %}
<fieldset>
<label for="club-embroidery">{{ field_label }}</label>
<select id="club-embroidery">
{% for option in selection_options %}
<option value="{{ option | escape }}">{{ option | escape }}</option>
{% endfor %}
</select>
</fieldset>
{% endif %}
{% endif %}
The issue I'm facing is that when I type something into the text input field (e.g., for embroidery customization), the text disappears as soon as I click anywhere else or when the page refreshes. It seems like the input field resets itself whenever the variant is updated or any other action is performed.
My goal is to retain the typed input even when the variant is changed or other actions are performed.
How can I prevent this text input from resetting? Do I need to use JavaScript to store the value or is there a Liquid-based solution for this?
Screenshots: I've attached screenshots to demonstrate how the dropdowns and text fields appear on the product page:
Before Selecting Embroidery
After Selecting Jacket Embroidery, the custom liquid fields appear:
Text disappears from the text field, and the dropdown also refreshes to the first/default value when I click outside or anywhere else
Example Product URL: https://kaiten-ab.myshopify.com/products/kaiten-elite-line-hiyaku-extra-large-200-to-215cm
Password: kaiten
Thanks in advance for your help!
Hi @M_Sohail_Shafi
To fix the field issue, place them outside variant-selects , and it will work. Do it for all the fields where you are facing the issue.
As you have added it in variant-selects it will be removed every time when the input focus is changed
Hi Huptech-Web,
I have used if conditions to hide/show the fields such as:
If selected-variant contains 'Jacket'
{
add the respective jacket embroidery fields
}
If selected-variant contains 'Trouser'
{
add the respective trouser embroidery fields
}
If selected-variant contains 'Shoulder'
{
add the respective shoulder embroidery fields
}
