title: Adding product to cart from collection page in shopify
body: <p>I've added an add to cart button to my collection pages in shopify. The button works, however when a different option (size) than the default one is selected it still adds the default size to the cart.
  This is my code</p>
  
  <pre><code>{% for product in collection.products %}
        &lt;form action="/cart/add" method="post" enctype="multipart/form-data"&gt;
      {% unless product.has_only_default_variant %}
      {% for option in product.options_with_values %}
      &lt;div class="selector-wrapper js"&gt;
        &lt;div class="col-size"&gt;
        &lt;p&gt;Select your size&lt;/p&gt;
        &lt;select
          id="single-option-selector"
          data-single-option-selector
          data-index="option{{ option.position }}" size="6"&gt;
        {% if option.name == 'Size' %}
          {% for value in option.values %}
          &lt;option
            value="{{ value | escape }}"
            {% if option.selected_value == value %}selected="selected"{% endif %}&gt;
              {{ value }}
            &lt;/button&gt;
          &lt;/option&gt;
          {%endfor%}
        {% endif %}
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        {% endfor %}
      {% endunless %}
  
      &lt;select name="id" class="no-js" data-product-select&gt;
        {% for variant in product.variants %}
          &lt;option
            {% if variant == current_variant %}selected="selected"{% endif %}
            {% unless variant.available %}disabled="disabled"{% endunless %}
            value="{{ variant.id }}"&gt;
              {{ variant.title }}
          &lt;/option&gt;
        {% endfor %}
      &lt;/select&gt;
  
  
  
      &lt;input type="submit" value="Add to cart" class="btn" /&gt;
          &lt;input type="hidden" name="return_to" value="back" /&gt;
    &lt;/form&gt;
  {% endfor %}
  </code></pre>
  
  <p>Anybody got any idea how to fix this so the right option is added to the cart? </p>