Add as quantity drop down in cart page of debut theme shopify

Question

Hi I am working on the Shopify Debut theme. I want to add quantity selector as a drop-down in cart page.

But iam not able to do so. I have added the drop down on my product page with the help of this code

          <input id="quantity" type="number" name="quantity" value="1" class="tc item-quantity" />
<select name="quantity" id="quantity">
         {% for i in (1..4) %}
                  <option value="{{ i }}">{{ i }}</option>
          {% endfor %}         
</select>

This is working fine, but i am not able to do so on my cart template. Here is the code for my cart template as well

<div class="cart__qty">
                  <label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
                  <input id="updates_large_{{ item.key }}" class="cart__qty-input" type="number"
                    name="updates[]" value="{{ item.quantity }}" min="0" pattern="[0-9]*"
                    data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop>

                </div>

Please guide how can i make this work for cart page as well

Sean S. Sean S. · Accepted Answer · 2020-08-26T08:33:23

This should work with Debut theme, what you need to do is change <input> to <select>.

<div class="cart__qty">
    <label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
    <select id="updates_{{ item.key }}" class="cart__qty-input" value="{{ item.quantity }}" data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop>
      {% for i in (1..4) %}
        <option value="{{ i }}" {% if forloop.index==item.quantity %}selected{% endif %}>{{ i }}</option>
      {% endfor %}
    </select>
</div>

EDIT: Also keep in mind that in Debut theme inside cart-template.liquid there are two places where you need to update your code. One is for mobile version and one for desktop.

Here's the code for mobile as well:

            <div class="cart__qty medium-up--hide">
              <label for="updates_{{ item.key }}" class="cart__qty-label" aria-label="{{ 'cart.label.quantity' | t }}" data-quantity-label-mobile>
                {{ 'cart.label.qty' | t }}
              </label>
              <select id="updates_{{ item.key }}" class="cart__qty-input" data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-mobile>
                {% for i in (1..4) %}
                    <option value="{{ i }}" {% if forloop.index==item.quantity %}selected{% endif %}>{{ i }}</option>
                {% endfor %}   
              </select>
            </div>

Add as quantity drop down in cart page of debut theme shopify

1 Answers