How to Set Up Quantity Selectors for Discounts

This guide explains how to connect the app's volume discount options (e.g., radio buttons for "Buy 2," "Buy 3") to your theme's native quantity input field. When a customer selects a discount tier, the quantity on the product page will update automatically.

1. Find Your Theme's Quantity Selector Class

1. On your live store, go to a product page that has the volume discount active.
2. Right-click directly on the quantity input field (the box where you see the number "1") and select Inspect from the menu.
3. In the developer console that opens, look for the highlighted line of HTML and find the class="..." attribute.
4. Copy the class name (or names) from within the quotes.

2. Add the Class to the App's Settings

1. In the Kite app, navigate to Settings and then click on Widget setting.
2. Scroll down to find the input field labeled Quantity button selector.
3. Paste the class name you copied into this field.

3. Format the Class Name Correctly

1. You must add a period (.) to the beginning of the class name. For example, if the class you copied is quantity__input, you should enter .quantity__input.
2. If the selector has multiple classes, separate them with a comma and add a period before each one (e.g., .class-one, .class-two).

4. Save and Test

1. Click Save in the app's settings.
2. Return to your product page and refresh it.
3. Click on one of the discount radio buttons. The quantity number in the input field should now update automatically to match the selected offer.

Updated on: 11/08/2025