# Quantity Buttons

## Overview

Add quantity buttons to your product pages so customers can select multiple units and unlock tiered discounts without extra friction. The buttons highlight savings to encourage larger purchases and drive higher average order values. 

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2F8jOnBZaYRi5VglCrLRwy%2Fimage.png?alt=media&#x26;token=130a3f6d-1db7-4760-8e4f-d8bc671793e2" alt=""><figcaption></figcaption></figure>

{% hint style="warning" icon="traffic-light-go" %}
**Before you start:**

* Quantity Buttons are automatically installed via the Intelligems script in most cases. If you are not seeing them when you preview your Offer on an eligible product, please see [below](#integrating-the-quantity-buttons) for help.&#x20;
* Quantity Buttons are only available on Quantity & Threshold Discounts that have at least one product selected.
* To set up a Price Test that is compatible with Quantity Buttons, [follow these steps](https://docs.intelligems.io/offer-experiences/how-to-set-up-a-price-test-with-quantity-buttons).
  {% endhint %}

## Configuration

### Basic Setup

* **Section title**: Header text (e.g., "END OF THE YEAR SALE").
* **Base button**: Enable single-item option.
* **Button title:** The main text displayed on each quantity button — typically used to highlight unit count.&#x20;
* **Subtitle:** Secondary text displayed below the title on each button.
* **Label**: A small tag displayed on a button to call out custom text.
* **Badge:** An overlay badge on the button, typically used to highlight a recommended or popular tier.
* **Default tier selection:** The tier pre-selected when a customer lands on the page.
* **Compare at price:** Enable this option to display compare price. This field will display the compare-at price that is in Shopify for the product being viewed adjusted for the selected quantity.&#x20;
* **Show prices per item:** Displays the per-unit price within each button to make tiered pricing easy to compare.
* **Free gift display**: Include free gift information on qualifying tiers.
* **Free shipping badge**: Includ free shipping information on qualifying tiers.
* **Variant mix:** Let customers mix & match variants per tier.

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fgit-blob-21edf96134456a2cc03b1c219bee7850a3385430%2FQuantity%20button%20config5.png?alt=media" alt=""><figcaption></figcaption></figure>

### Dynamic Variables

Use dynamic variables to populate button text automatically — like the product title or saved amount. Type two brackets or use the field menu on the right to insert them.

**Example Usage:** "Save {Saved percentage} on {Product title}" to display as "Save 15% on Cast Iron Round Casserole Dish"

#### Discount Variables

* `{Saved percentage}`: Display discount percentage
* `{Saved $ total}`: Total dollar savings
* `{Saved $ per item}`: Per-unit savings amount

#### Product Variables

* `{Product title}`: Specific product names
* `{New total price}`: Discounted total price
* `{New price per item}`: Discounted per-unit price
* `{Original total price}`: Original total pricing
* `{Original price per item}`: Original per-unit cost

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fgit-blob-8124e78e321d8dbd24e2ddf035fa3083286eb333%2FQuantity%20button%20configvariables.png?alt=media" alt=""><figcaption></figcaption></figure>

### Color & Style

Styling options available include:

* **Button Style:** Choose from three button style options.&#x20;

  * **Classic List:** Clean, vertical layout with quantity tiers. Best for traditional presentations with detailed pricing.

  <figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fgit-blob-1dac7546f816f31ee90cbf20a9e0eabb8d39de41%2FScreenshot%202025-10-13%20at%203.22.14%E2%80%AFPM.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

  * **Image Cards:** Includes product images for each option. Ideal for bundles, gift sets, and visual product storytelling.

  <figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fgit-blob-d57ccbe2fade75f543c214b38198f7a3b09e05fb%2FAccordionA.png?alt=media" alt=""><figcaption></figcaption></figure>

  * **Compact:** Space-saving layout for quick comparison. Perfect for limited space and mobile experiences.

  <figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fgit-blob-61de82a3ebcba25266132a15dd5f02dd202c18ef%2FAccordionC.png?alt=media" alt=""><figcaption></figcaption></figure>

* **Layout Options:** Choose between a side-by-side or stacked layout.&#x20;

* **Colors:** Control the colors for all fields.&#x20;

* **Typography:** Control the font sizes and styles for each text field.&#x20;

{% hint style="success" %}
You can also customize the look of your quantity buttons in [**Global Styles**](https://docs.intelligems.io/general-features/global-styles) (left menu) to keep them consistent across all your offers. You can adjust button styles, primary/secondary/border colors, and set separate styles for desktop and mobile.&#x20;
{% endhint %}

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fgit-blob-17694df854247cb6ed85e3b56f06f81c0e1e7564%2FGlobal%20Styles.png?alt=media" alt=""><figcaption></figcaption></figure>

## Integrating the Quantity Buttons&#x20;

No separate setup is needed in most cases — the buttons are automatically installed once the Intelligems script is added to your theme & you have set up an offer that includes the quantity buttons component.

{% hint style="warning" %}
Note that you will need to preview or start your offer in order to see the quantity buttons on your site.
{% endhint %}

If you don't see the buttons while previewing or once you're started your offer, or they are in the wrong location, your theme may use a custom quantity selector that differs from the standard format.&#x20;

To resolve this, you'll need to manually place the below snippet in your theme code.&#x20;

```liquid
<ig-volume-quantity-widget></ig-volume-quantity-widget>
```

Follow these steps to do so:

1. Access your theme code in Shopify.
2. Locate your product page file.
   1. The file is typically called `sections/main-product.liquid` for OS 2.0 themes, or `templates/product.liquid` for older themes. If you're unsure, reach out to our support team.
3. Find your current qunatity selector.
   1. To orient yourself, search your file for `type="number"` or `name="quantity"` to see your product page structure.
   2. If your theme uses `{%- when 'xyz' -%}` blocks (OS 2.0 themes), you'll see sections like `variant_picker`, `quantity_selector`, and `buy_buttons`.&#x20;
4. Insert the snippet where you want the buttons to appear — common placements are:
   1. Right before your add to cart button code
   2. Between variant selection and purchase buttons
   3. Near your existing quantity selector&#x20;
5. Test and adjust.
   1. Save your changes in Shopify — nothing will appear for customers until you publish your Intelligems offer.
   2. Preview your offer in Intelligems.
   3. Check if the buttons appear where you want them.
   4. If they're not in the right spot, move the snippet to a different location and test again.

{% hint style="info" icon="file-magnifying-glass" %}
Here's an example placement for reference:

```liquid
{%- when 'variant_picker' -%}
  {% render 'product-variant-picker'... %}

<ig-volume-quantity-widget></ig-volume-quantity-widget>

{%- when 'buy_buttons' -%}
  <button type="submit">Add to cart</button>
```

{% endhint %}

## FAQs

<details>

<summary>How do I update the default quantity in my quantity buttons?</summary>

To change the default quantity selected in an offer, you'll need to change the default quantity within Shopify.

</details>

<details>

<summary>Will the quantity buttons work with multiple currencies?</summary>

By default, quantity buttons will **only reflect your store's default currency**. To solve for this, you can either set up audience targeting for your default currency, or follow the steps below to use the buttons with multiple currencies:

1. Add the script below to the `<head>` section of your **theme.liquid** file.

```
<script type="text/javascript">
    window.igCurrencyFn = (cents, el) => {
      // Use Shopify's active currency (set by currency switcher)
      const currencyCode = window.Shopify?.currency?.active || 'USD';
      const formatter = new Intl.NumberFormat('en', {
        style: 'currency',
        currency: currencyCode,
        currencyDisplay: 'symbol'
      });
      
      return formatter.format(cents / 100);
    };
    </script>

```

2. Inside Intelligems, go to Settings and scroll down to **Currency Function.**

<figure><img src="https://2052204893-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2SvefuMLsJyJPAcVXeWc%2Fuploads%2Fgit-blob-fa858a14b1c28bb7c35e014c61a8e8cda86d6efe%2FScreenshot%202025-11-04%20at%202.06.59%E2%80%AFPM.png?alt=media" alt=""><figcaption></figcaption></figure>

3. Add `window.igCurrencyFn` into the **Currency Function** field and click **Save Configurations.**

</details>