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

Sectioned and non-sectioned themes

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 your Customize theme page and click on a product in the theme preview. When you are viewing a product page in the theme preview, you will see the Product pages tab in the theme editor:
Product pages tab
  1. Click Product pages. If your theme includes the option to enable a quantity selector, then you will see a Show quantity selector checkbox in the theme editor:
Show quantity selector
  1. Check the Show quantity selector checkbox.

  2. Click Save.

If your theme does not 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. Find the theme you want to edit, and then click Actions > Edit code.

  2. In the Sections directory, click product-template.liquid.

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

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

  5. Click Save.

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 your Customize theme page and click on a product in the theme preview. When you are viewing a product page in the theme preview, you will see the product page settings tab in the theme editor:
Product pages tab
  1. Click Product pages. If your theme includes the option to enable a quantity selector, then you will see a Show quantity selector checkbox in the theme editor:
Show quantity selector
  1. Check the Show quantity selector checkbox.

  2. Click Save.

If your theme does not 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. Find the theme you want to edit, and then click Actions > Edit code.

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

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

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

  5. Click Save.

Want to discuss this page?

Visit the Shopify Community