Add 5 quantity each time I press the + button

Store Design
, ,

Topic summary

A user wants to modify their Shopify store so the quantity increment button adds 5 items instead of 1 per click, preferably without plugins.

Code-based solution:
One contributor provided JavaScript code that intercepts the + button click event and increases the quantity input by 5. The implementation requires identifying the correct CSS selectors for the plus button and quantity input field in the theme.

Theme-specific guidance:
For the Refresh theme specifically, another user shared markup code to replace in the main-product.liquid file, with a screenshot showing the exact location of the modification.

Plugin alternative:
The MultiVariants – Bulk Order app was recommended as a no-code solution. It includes a “Quantity Interval” feature that allows setting custom increment values (like 5) through the app’s settings interface.

The discussion remains open as the original poster is still working through implementation details for their specific theme.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone, I would to make it so that each time the user clicks the + button next to a product, 5 items instead of 1 gets added to the cart, can it be done without plugins? if not, what plugin should I use?

3 Likes
2

Hey @sicignanog ,

Yes, you can definitely do this without plugins by customizing the quantity increment on the + button using JavaScript on your Shopify theme.

Basic approach (without plugins)

  1. Find the + button in your product form — usually it’s a button or input with a class like .qty-plus or .quantity-increment.

  2. Add a JavaScript event listener on that button.

  3. When clicked, increase the quantity input value by 5 instead of 1.

Sample code snippet

document.addEventListener('DOMContentLoaded', () => {
  const plusBtn = document.querySelector('.qty-plus'); // Replace with your + button selector
  const qtyInput = document.querySelector('input[name="quantity"]'); // Your quantity input selector

  if (plusBtn && qtyInput) {
    plusBtn.addEventListener('click', (e) => {
      e.preventDefault(); // Prevent default increment behavior if any
      let currentQty = parseInt(qtyInput.value) || 0;
      qtyInput.value = currentQty + 5;
      qtyInput.dispatchEvent(new Event('change')); // Trigger change event if needed
    });
  }
});

Replace .qty-plus and input[name=“quantity”] selectors with the ones used in your theme.

If you want a plugin:

If you prefer using an app, here are some popular Shopify apps that give advanced quantity control

  • Quantity Breaks & Discounts by SpurIT (also can control increments)

  • Infinite Options by ShopPad

  • Bold Quantity Breaks

If you want help implementing this, please feel free to reach out. Thanks!

Best Regards

Rajat

Shopify Expert

1 Like
3

Which theme are you using for your store?

1 Like
4

hi, I’m using the shopify refresh theme

5

Hi, I’m using the Refresh theme, In the product-form.js I can’t find the plus button, how is it called there?

6

You can replace this code in main-product.liquid file

With this code

Screenshot 2025-05-16 at 10.24.01.png
Screenshot 2025-05-16 at 10.24.01.png2932Ă—1550 634 KB

7

Hello @sicignanog ,

Regarding your requirement — where clicking the quantity button adds 5 items to the cart instead of 1 — this functionality can be achieved using a third-party Shopify app called MultiVariants – Bulk Order.

This app offers an incremental quantity feature, which allows you to set quantity intervals for your products. By enabling this feature, you can configure the quantity to increase or decrease in specified intervals, such as 5 units at a time, under the “Quantity Interval” setting.

If you would like further information, let me know.

Quantity intervals
Quantity intervals1867Ă—830 156 KB