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

STEP 1 CREATING A DISCOUNT CONDITION ON SHOPIFY

You must first create a discount logic via Shopify.

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

• Go to Shopify Admin > Discount:

• Setting up the condition

• 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 %}

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 }}

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

.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!

A FEWS NOTES:

Updated on: 24/06/2024