Why Add a Confetti Effect?
Adding a Confetti Effect on Add to Cart Button in Shopify is a creative way to make your store interactive and enjoyable. Instead of a plain click, shoppers see a colorful burst of confetti, which sparks excitement and joy. This fun animation can improve user satisfaction, encourage more clicks, and make your brand stand out in a competitive market. A small effect like this can have a big impact on customer experience.
Step 1: Add the Confetti Script in Theme.liquid
From your Shopify admin, go to Online Store > Themes > Edit Code.
Open the Layout > theme.liquid file and paste the following code inside the <head> tag:
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
This script loads the confetti library required for the animation to work.
Step 2: Add the Confetti Code in buy-buttons.liquid
Next, open the Snippets > buy-buttons.liquid file.
Right before the closing </product-form> tag, paste this code:
<script>
document.addEventListener('DOMContentLoaded', function() {
const addToCartButton = document.querySelector('#ProductSubmitButton-{{ section_id }}');
if (addToCartButton) {
addToCartButton.addEventListener('click', function() {
confetti({
particleCount: 200,
spread: 100,
origin: { y: 0.8, x: 0.8 }
});
});
}
});
</script>
This ensures the Confetti Effect on Add to Cart Button in Shopify works every time a customer clicks the button.
Step 3: Save and Test
After adding the script, click Save. Visit your store, add a product to the cart, and you’ll instantly see the confetti celebration. This small detail makes your store feel festive and memorable.
Extra Tips
- Adjust particleCount and spread to create different effects.
- Change the origin values to control where the confetti starts.
- Always test on desktop and mobile for a smooth experience.
Final Thoughts
Adding a Confetti Effect on Add to Cart Button in Shopify is quick, free, and highly effective. You don’t need any third-party apps, and it only takes a few minutes to set up. With this fun effect, you create a more positive shopping journey that delights customers and helps your store stand out.