In this article, we will go over how to create an automatic discount when adding a certain number of products to the Cart.

We’ll use an example with 3 discount conditions. These conditions, as well as the discount amounts, can be adjusted to your liking.

Buy 2 items get 10% OFF
Buy 3 items get 15% OFF
Buy 5 items get 20% OFF

Step-by-Step Setup Guide

STEP 1: CREATING A DISCOUNT CONDITION ON SHOPIFY

You must first create the discount logic in Shopify. For more information, please refer to Shopify's guide, or follow the steps below:

• Go to Shopify Admin > Discounts:

• Select automatic discount and set up the condition:

STEP 2: ADDING THE DISCOUNT BLOCK TO YOUR PRODUCT PAGE

In this example, I will put the discount block at the top of my product page so that customers can easily see it.

• Go to your Shopify admin > Themes > Actions > Edit code of your published theme.
• Since we're going to add the discount block to the product page, you will need to find the Liquid file for the product page. Most of the time, it could be named main-product.liquid or something similar.

• Locate the section where you want to add the discount block. In this example, I want to add it below the Product Title.

• Add the following liquid to the section you want {% include 'quantity-upsell' %} . This allows the product page to render the quantity-upsell file and apply the discount logic you set in Step 1.

STEP 3: CREATING THE QUANTITY-UPSELL FILE

• Under your Snippets folder, create a file called quantity-upsell.liquid

• Copy paste the following scripts to the file you created:

{% assign in_cart_quantity = 0 %}
{% for item in cart.items %}
    {% assign in_cart_quantity = in_cart_quantity | plus: item.quantity %}
{% endfor %}

<div class="quantity-upsell">
  <h5>Buy more save more!</h5>
  <ul class="quantity-upsell-list">
    <li>
      <span>Buy 2 items get 10% OFF</span>
      {% assign upsell_quantity = 2 | minus: in_cart_quantity %}
      {% unless upsell_quantity > 0 %}
        <button class="btn btn-sm btn-disabled" disabled data-quantity="{{ upsell_quantity }}">Added</button>
      {% else %}
        <a href="javascript:;" class="btn btn-sm"  data-quantity="{{ upsell_quantity }}">Add</a>
      {% endunless %}
    </li>
    <li>
      <span>Buy 3 items get 15% OFF</span>

      {% assign upsell_quantity = 3 | minus: in_cart_quantity %}
      {% unless upsell_quantity > 0 %}
        <button class="btn btn-sm btn-disabled" disabled data-quantity="{{ upsell_quantity }}">Added</button>
      {% else %}
        <a href="javascript:;" class="btn btn-sm"  data-quantity="{{ upsell_quantity }}">Add</a>
      {% endunless %}    </li>
    <li>
      <span>Buy 5 items get 20% OFF</span>
      {% assign upsell_quantity = 5 | minus: in_cart_quantity %}
      {% unless upsell_quantity > 0 %}
        <button class="btn btn-sm btn-disabled" disabled data-quantity="{{ upsell_quantity }}">Added</button>
      {% else %}
        <a href="javascript:;" class="btn btn-sm"  data-quantity="{{ upsell_quantity }}">Add</a>
      {% endunless %}
    </li>
  </ul>
</div>
{% if in_cart_quantity > 0 %}
{% endif %}

STEP 4: PREPARING THE FUNCTION AND THE STYLES OF THE NEW ADD TO CART BUTTONS

• Under the `Layout` folder, find the theme.liquid file and click on the file name to open it on the right.
• Ctrl+F to find the tag.
• Enter the following scripts:

{{ 'teeinblue-custom.js' | asset_url | script_tag }}
{{ 'teeinblue-custom.css' | asset_url | stylesheet_tag }}

STEP 5: ADDING THE CUSTOM JS FILE

• Under your Assets folder, create a new file called teeinblue-custom.js

• Paste the following scripts there:

document.addEventListener('DOMContentLoaded', () => {
  const quantityUpsellEls = document.querySelectorAll('.quantity-upsell [data-quantity]');

  quantityUpsellEls.forEach((quantityUpsell) => {
    quantityUpsell.addEventListener('click', (event) => {
      const quantity = event?.target?.dataset?.quantity;
      const quantityEl = document.querySelector('[action*="cart/add"] [name="quantity"]');

      if (quantity && quantityEl) {
        quantityEl.value = quantity;
        quantityEl.dispatchEvent(new Event('input'));
      }

      const atc = document.querySelector('#teeAtcButton, [action*="cart/add"] [type="submit"]');

      if (atc) {
        atc.scrollIntoView({ behavior: 'smooth', block: 'end' });
        setTimeout(() => {
          atc.click();
        }, 200);
      }
    });
  });
});

STEP 6. ADDING THE CUSTOM CSS FILE

You can style the block however you like. The CSS below in this step will be pretty basic, just enough for you to see the lines and the buttons:

.quantity-upsell {
  margin-top: 25px;
}

.quantity-upsell-list {
  list-style: none;
  margin: 0 0 15px;
  padding: 0;
  border: 1px solid #e5e5ea;
  border-radius: 5px;
}

.quantity-upsell-list li {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 15px;
}
.quantity-upsell-list li + li {
  border-top: 1px solid #e5e5ea;
}

.quantity-upsell-list li a,
.quantity-upsell-list li button {
  margin-left: auto;
  width: 60px;
  padding-top: 5px;
  padding-bottom: 5px;

  &:disabled {
    opacity: 0.35;
  }
}

• Under your Assets folder, create a new file called teeinblue-custom.css, then copy-paste the CSS above to that file.

TEST YOUR CUSTOMIZATION ON THE PRODUCT PAGE

If you have done all the steps above, your Product Page should now look like this:

After using the new ATC Button to add to cart, the following will appear!

A FEW NOTES:

• This will only work within the same product page. You cannot combine the conditions between different product pages.
• This customization is currently experimental. It might or might not work with some themes or the SDK version you are using. You should try the steps with your backup theme first and make sure to test everything carefully before going into production.

Updated on: 12/10/2026