Adding a quantity button on product page

Store Design
, , ,
1

Using DAWN theme,
How would I add a quantity button so people could add more product to their cart if they’re wanting more then the 1 of the item?

2

In the Dawn theme, the quantity selector is usually built in — but if it’s missing, here’s how to add it:

:magic_wand: Steps:

  1. Go to Online Store → Themes → Customize.

  2. Open a Product Page.

  3. On the left panel, click Product information.

  4. Scroll down and enable “Quantity selector” (there’s a toggle for it).

  5. Click Save.

That’s it — now customers can choose the quantity before adding to cart.

If you don’t see that option, tell me your Dawn theme version, and I’ll give you the code method instead.

4

it’s version 15.3 thank you

5

In Dawn 15.3, you don’t need any code — Shopify already includes the quantity selector option.

Just do this:

Go to Online Store → Themes → Customize.

From the top dropdown, select Products → Default product.

In the left sidebar, click Product information.

Scroll down and toggle on “Show quantity selector.”

Click Save.

Now customers will see “– / +” buttons to adjust quantity before adding to the cart.

if this does not work tell me JGBowie

6

Hi @JGBowie,

1. Go to Online Store → Theme → Edit code.
2. Open your main-product.liquid file.

Inside the main-product.liquid file, you need to find the product form element.

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

Insert the Quantity Selector Code:

Directly above the block of code for the “Buy buttons” (which usually starts with

), you will add the code for the quantity selector.

<div class="product-form__input product-form__quantity">
  <label for="Quantity-{{ section.id }}" class="form__label">
    {{ 'products.product.quantity.label' | t }}
  </label>
  <input type="number" id="Quantity-{{ section.id }}"
         name="quantity" value="1" min="1" class="quantity__input"
         aria-label="{{ 'products.product.quantity.input_label' | t: product: product.title | escape }}">
</div>

Click Save and try.

Thank you!