shopify liquid add to cart button-CodePudding

I am new to shopify theme development and I'm building a theme from scratch to gain experience. I'm having trouble with the 'add to cart' button on my product page. Even though I have various product options for a product, I am only displaying the 'size' options as radio buttons and then I take an input quantity and add it to the cart. The problem I am facing right now, is that the cart only adds 1 item at a time, So even if I input 3 or 4 as my quantity, the cart only adds 1 as the quantity. here's my code:

{% form 'product', product %}
        <div>
            <p >Size</p>
            <div ></div>
            <div >
                {% for product_option in product.options_by_name['Size'].values %} 
                    <input type="radio" id = "{{ product_option }}" name="size" value="{{ product_option }}" > 
                    <label for="{{ product_option }}">{{ product_option }}</label> 
                {% endfor %}
            </div>
        </div>

        <div ></div>

        <div >
            <div >
                <input  type="number" min="1" placeholder="1"> 
                <input type="hidden" name="id" data-productid="{{ product.variants[0].id }}" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
            </div>
            <div >
                <button  type="submit" value="Add To Cart">ADD</button> 
            </div>
        </div>     
    {% endform %}

Any help will be much appreciated. I am so lost regarding how I should fix it.

CodePudding user response：

It should work fine if you add the proper name and value attribute to your input element:

<input name="quantity" value="3">

This would add the selected variant ID three times to the cart.