Add a quantity selector to product pages

Note

If you are using a sectioned theme, your theme might include a setting to add a quantity selector. To verify this, in the theme editor, open a product page in the preview area, and then in the Sections tab, click the Products pages section. Some themes include a Show quantity selector check box:

Add quantity selector

You can add a quantity box to product pages so visitors can add several items at once to their cart.

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. Under the Templates folder, locate and click on product.liquid to open it in the online code editor.

  3. Use CMD-F for Mac or CTRL-F for Windows to find the "add to cart form." Between the <form> and </form> tags, add this code to add a text box:

    <label for="quantity">Qty: </label>
    <input min="1" type="number" id="quantity" name="quantity" value="1" />
    <style>#quantity { padding:5px; width:35px; border: 1px solid #555; }</style>
    

    To add a drop-down menu instead, use this:

    
    <label for="quantity">Qty: </label>
    <select id="quantity" name="quantity">
    {% for i in (1..10) %}
    <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
    </select>
    
    
  4. Save your changes.

Want to discuss this page?

Visit the Shopify Community