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





In this article, we will go over how to create for 3 conditions. These conditions, or the amount of discount, can be changed to your liking.

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

Please note that this discount condition will only be applied to the same product page.

A little coding skills are required.

STEP 1 CREATING A DISCOUNT CONDITION ON SHOPIFY

You must first create a discount logic via Shopify.

You can refer to this article for more information: https://help.shopify.com/en/manual/discounts/discount-types/percentage-fixed-amount

Or, you can find the steps below to create a discount logic

Go to Shopify Admin > Discount:



Setting up the condition



Be sure to select automatic discount

The amount of discount can be determined by you

Once you're done, you can continue to create more discount logic for more numbers of products.

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 the 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 in which you want to add the discount block to. In this case, I want to add it below the Product Title.



Add the following liquid to the section you want {% include 'quantity-upsell' %}
This is so the product page will render the file quantity-upsell to apply the discount logic you have 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 %}

These are the HTML elements and the logic of the discount block. You can modify the text, or the number of discount there by changing the number of of the upsell_quantity = line.
However, it will not work yet, you will have to add the add to cart function to the add button you recently created. Please continue the step below.

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

Under Layout folder, find the "theme.liquid" file, click on the file name to open that file on the right.

Ctrl+F to find the tag </head>

Enter the following scripts

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

This is so the Theme can read the custom CSS and custom JS file you are going to create.

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 actually style the block however to your liking. The CSS below in this steps 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 looks like this.



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



If you see the discounts being applied, you are good to go!

A FEWS NOTES:

This will only work within the same product page. You cannot combine the condition between different product pages. We are researching that feature!

This customizations experimentary! It might or might not work with some Theme, 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.

If you need help doing this, please contact our support team!

Updated on: 24/06/2024