All Tutorials

Add a quantity selector to product pages

All Tutorials

Add a quantity selector to product pages

Add a quantity selector to product pages

You can add a quantity selector to product pages to allow customers to add several products to their cart at once:

Quantity selector

Check your theme settings

Many themes include the option to enable a quantity selector on product pages. To see if your theme includes this option:

  1. Go to the theme editor.

  2. From the drop-down menu at the top of the page, or from the Templates menu on mobile, click Product pages.

  3. Click Product pages or Product. If your theme includes the option to enable a quantity selector, then you will see a Show quantity selector checkbox in the theme editor.

  4. Check the Show quantity selector checkbox.

  5. Click Save.

If your theme doesn't include the option to enable a quantity selector, then you can add one by editing your theme code. Continue to follow the next steps.

Edit your theme code to add a quantity selector

To add a quantity selector to your product pages by editing your theme code:

  1. In the Templates directory, click product.liquid.

  2. Find the opening <form> tag in the code.

  3. Between the opening <form> tag and the closing </form> tag, paste the following code:

    <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>

    The exact position of the code will vary theme to theme. You can experiment with putting the code in different places to find a location that you are happy with.

  4. Click Save.