variant - Shopify , show product options as 3 seperate dropdowns instead of 1 single dropdown

On my product page, with the following line of code in the product.liquid template, it generates 3 seperate dropdowns for the 3 different product options the product has, eg Type Color Size..

  <div class="select">
    <select id="product-select" name="id">
      {% for variant in product.variants %}
      <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
      {% endfor %}
    </select>
  </div>
Copy code

however, i used the same code in the product-loop.liquid to show the same drop down on the collections page (without the option to add to cart).. but this time the dropdown appears as 1 single combined dropdown.

how do i split them up like before?

heres a screenshot of what both dropdowns look like :

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.