Hide/show product variant if there is one for a product

Technical Q&A
,

Topic summary

Goal: Conditionally render a variant selector for a Shopify product—show a dropdown only when the product has multiple variants; otherwise use a hidden input or message.

Context: Implemented in Liquid (Shopify’s templating language). “Variants” are product options like size/color. Logic was intended to check product.variants.size.

Observed behavior: The select element still rendered even for products without variants. Debug attempts to print product.variants.size or branch on > 1 didn’t show expected output. Rendered HTML showed a single option “Default Title.”

Key issue found: A Liquid syntax error caused the conditional to fail. The tag was written as “elseif,” which Liquid didn’t recognize, producing: “Liquid syntax error (line 27): Unknown tag ‘elseif’.”

Resolution: Replaced “elseif” with “else if” (with a space), after which the conditional behaved correctly and the select only appears when appropriate.

Status: Resolved. No further action items noted. If similar issues occur, verify Liquid conditional syntax and debug by outputting product.variants.size.

Summarized with AI on December 27. AI used: gpt-5.
1

I am working on a form where a user will be able to add an existing product into their cart. I have a form and a button users can use and add products to their cart. The product does get added to the cart however, in the case for variants, i want to hide/show if a given product has one. But as it stands now, none of the products have a variant.


<div>
{% form 'product', product %}

{% if product.variants.size == 1 %}
{% assign variant = product.variants.first %}
{% if variant.available %}
<input type="hidden" name="id" value="{{ variant.id }}">
{% else %}
<p>This variant is not available.</p>
{% endif %}

{% elseif product.variants.size > 1 %}
<select class="variants-mobil" name="id">
{% for variant in product.variants %}
<option value="{{ variant.id }}">
{{ variant.title }}
</option>
{% endfor %}
</select>
{% endif %}

<!-- variants end -->
<button>Add to cart</button>
{% endform %}
</div>

The if/else statement I currently have is not working, it is still displaying the select element on the browser.

I need to display a list of variants if the product has one, but if it doesn’t, then the select tag shouldn’t be rendered. I have manually added some products and none of them had any variants included to them.

I can add products to the cart through the website im currently working on but i just want to dynamically display or hide the list of variants.

How can i hide/show the select html based on this condition?

2

Have you tried outputting the value of “product.variants.size”? The logic looks good, but it is quite odd since it’s still outputting the select even though there is no variant at all.

3

Yes, i have tried doing something similar just to check and see the output, and unless I’m looking at the wrong place, I’m still not seeing anything rendered..

for example I tried this


{% if product.variants.size > 1 %}
Variants exist
{% else %}
No variants
{% endif %}

And about your suggestion, i tried it like this but still nothing.

{% product.variants.size %}

Thanks!

btw, this is the rendered html by the browser:

<select class="variants-desktop" name="id">
<option value="44439545905283">
Default Title
</option>
</select>
4

I found the solution! Apparently the proper way to write “else if” is not “elseif” but “else if” with a space between. anyway, i hadn’t noticed it until today but I had this error on the terminal

“Liquid syntax error (line 27): Unknown tag ‘elseif’”

1 Like
5

Good catch! I can’t believe it was just a syntax error :rofl:

1 Like