CODEWITHSUNDEEP
shopifyvariant
wsgg
wsgg

Reputation: 984

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>

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 : enter image description here

Upvotes: 0

Views: 1937

Answers (1)

Sark
Sark

Reputation: 4546

You need to include option_selection.js in your collection.liquid template. paste the following line at top or bottom of your collection.liquid template

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

Upvotes: 1

Related Questions