Adding product to cart from collection page in shopify

Question

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

{% for product in collection.products %}
      <form action="/cart/add" method="post" enctype="multipart/form-data">
    {% unless product.has_only_default_variant %}
    {% for option in product.options_with_values %}
    <div class="selector-wrapper js">
      <div class="col-size">
      <p>Select your size</p>
      <select
        id="single-option-selector"
        data-single-option-selector
        data-index="option{{ option.position }}" size="6">
      {% if option.name == 'Size' %}
        {% for value in option.values %}
        <option
          value="{{ value | escape }}"
          {% if option.selected_value == value %}selected="selected"{% endif %}>
            {{ value }}
          </button>
        </option>
        {%endfor%}
      {% endif %}
          </select>
        </div>
      </div>
      {% endfor %}
    {% endunless %}

    <select name="id" class="no-js" data-product-select>
      {% for variant in product.variants %}
        <option
          {% if variant == current_variant %}selected="selected"{% endif %}
          {% unless variant.available %}disabled="disabled"{% endunless %}
          value="{{ variant.id }}">
            {{ variant.title }}
        </option>
      {% endfor %}
    </select>



    <input type="submit" value="Add to cart" class="btn" />
        <input type="hidden" name="return_to" value="back" />
  </form>
{% endfor %}

Anybody got any idea how to fix this so the right option is added to the cart?

Do you have a JS that change the name="id" select when you change the single-option-selector select? If you don't you need to write one since the important select is the one with the name="id" and that is what it's submitted to the cart. — drip

Tyler Rowsell Tyler Rowsell · Accepted Answer · 2018-03-17T18:53:08

You would need to modify this part of your code and ensure that all of your products have option1 as your size.

You can adjust option1 to option2 or 3 as well but just make sure that is the size option for all product in a collection.

  {% for variant in product.variants %}
    <option
      {% if variant.option1 == "Large" %}selected="selected"{% endif %}
      {% unless variant.available %}disabled="disabled"{% endunless %}
      value="{{ variant.id }}">
        {{ variant.title }}
    </option>
  {% endfor %}

Adding product to cart from collection page in shopify

1 Answers