How to add falling confetti to your Shopify store
Similar to the snowfall effect you can easily create the falling confetti effect to your Shopify store.
This article will guide you how to makes uses of HTML5 canvas to create a fullscreen, great-looking confetti falling effect on the Shopify store.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- Under Layout, select theme.liquid.
- Scroll down the page until you find the close body tag.
- Paste the below code just before the tag12345<canvas id="canvas"></canvas><style>canvas {display: block;position: relative;zindex: 1;pointer-events: none;position: fixed;top: 0;}</style><script>var canvas1,ctx,W,H;if(screen.width>=988)var mp=50;else mp=50;var deactivationTimerHandler,reactivationTimerHandler,animationHandler,particles=[],angle=0,tiltAngle=0,confettiActive=!0,animationComplete=!0,particleColors={colorOptions:["DodgerBlue","OliveDrab","Gold","pink","SlateBlue","lightblue","Violet","PaleGreen","SteelBlue","SandyBrown","Chocolate","Crimson"],colorIndex:0,colorIncrementer:0,colorThreshold:10,getColor:function(){return this.colorIncrementer>=10&&(this.colorIncrementer=0,this.colorIndex++,this.colorIndex>=this.colorOptions.length&&(this.colorIndex=0)),this.colorIncrementer++,this.colorOptions[this.colorIndex]}};function confettiParticle(t){this.x=Math.random()*W,this.y=Math.random()*H-H,this.r=RandomFromTo(10,30),this.d=Math.random()*mp+10,this.color=t,this.tilt=Math.floor(10*Math.random())-10,this.tiltAngleIncremental=.07*Math.random()+.05,this.tiltAngle=0,this.draw=function(){return ctx.beginPath(),ctx.lineWidth=this.r/2,ctx.strokeStyle=this.color,ctx.moveTo(this.x+this.tilt+this.r/4,this.y),ctx.lineTo(this.x+this.tilt,this.y+this.tilt+this.r/4),ctx.stroke()}}function InitializeButton(){$("#stopButton").click(DeactivateConfetti),$("#startButton").click(RestartConfetti)}function SetGlobals(){canvas1=document.getElementById("canvas"),ctx=canvas1.getContext("2d"),W=window.innerWidth,H=window.innerHeight,canvas1.width=W,canvas1.height=H}function InitializeConfetti(){particles=[],animationComplete=!1;for(var t=0;t<mp;t++){var i=particleColors.getColor();particles.push(new confettiParticle(i))}StartConfetti()}function Draw(){ctx.clearRect(0,0,W,H);for(var t,i=[],n=0;n<mp;n++)t=n,i.push(particles[t].draw());return Update(),i}function RandomFromTo(t,i){return Math.floor(Math.random()*(i-t+1)+t)}function Update(){var t,i=0;angle+=.01,tiltAngle+=.1;for(var n=0;n<mp;n++){if(t=particles[n],animationComplete)return;!confettiActive&&t.y<-15?t.y=H+100:(stepParticle(t,n),t.y<=H&&i++,CheckForReposition(t,n))}0===i&&StopConfetti()}function CheckForReposition(t,i){(t.x>W+20||t.x<-20||t.y>H)&&confettiActive&&(i%5>0||i%2==0?repositionParticle(t,Math.random()*W,-10,Math.floor(10*Math.random())-10):Math.sin(angle)>0?repositionParticle(t,-5,Math.random()*H,Math.floor(10*Math.random())-10):repositionParticle(t,W+5,Math.random()*H,Math.floor(10*Math.random())-10))}function stepParticle(t,i){t.tiltAngle+=t.tiltAngleIncremental,t.y+=(Math.cos(angle+t.d)+3+t.r/2)/2,t.x+=Math.sin(angle),t.tilt=15*Math.sin(t.tiltAngle-i/3)}function repositionParticle(t,i,n,e){t.x=i,t.y=n,t.tilt=e}function StartConfetti(){W=window.innerWidth,H=window.innerHeight,canvas1.width=W,canvas1.height=H,function t(){return animationComplete?null:(animationHandler=requestAnimFrame(t),Draw())}()}function ClearTimers(){clearTimeout(reactivationTimerHandler),clearTimeout(animationHandler)}function DeactivateConfetti(){confettiActive=!1,ClearTimers()}function StopConfetti(){animationComplete=!0,null!=ctx&&ctx.clearRect(0,0,W,H)}function RestartConfetti(){ClearTimers(),StopConfetti(),reactivationTimerHandler=setTimeout(function(){confettiActive=!0,animationComplete=!1,InitializeConfetti()},100)}$(document).ready(function(){SetGlobals(),InitializeButton(),InitializeConfetti(),$(window).resize(function(){W=window.innerWidth,H=window.innerHeight,canvas1.width=W,canvas1.height=H})}),window.requestAnimFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)};</script>
- Click Save and you are done.
In fact, If you have knowledge about programming, you could further customize the effect to better suit your store.
Happy coding!
Hi!
How do I stop this animation after 5 seconds?
Ria
Hi I’m trying this and it doesn’t seem to work for my site.
I’ve added the code above the closing body tag but it doesn’t seem to be working