Add a quantity selector to product pages


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. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

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

  4. 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 %}
  5. Save your changes.

Want to discuss this page?

Visit the Shopify Community