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

[eduardocoello]

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?

[PaulMartin]

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.

[eduardocoello]

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>
```

[eduardocoello · Accepted solution]

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'"

[PaulMartin]

Good catch! I can't believe it was just a syntax error 🤣