How To Make A Confetti Effect on Add to Cart Button in Shopify

Step 1: Add the below line of code in “Theme.liquid”

Add the following code:

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

Step 2: Add the below code in snippets “buy-buttons.liquid” file

Just before the following code </product-form> , add the below code:

        <script>
          document.addEventListener('DOMContentLoaded', function() {
            const addToCartButton = document.querySelector('#ProductSubmitButton-{{ section_id }}');
            if (addToCartButton) {
              addToCartButton.addEventListener('click', function() {
                 confetti({
                  particleCount: 200, // Number of confetti particles
                  spread: 100,         // Spread of the confetti
                  origin: { y: 0.8, x: 0.8 } // Confetti origin point, 0 is the top, 1 is the bottom
        });
              });
            }
          });
        </script>