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

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

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 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. In the Sections directory, click product-template.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.

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

Ready to start selling with Shopify?

Try it free