Transform Your Shopify Store into a Winter Wonderland with Christmas Effects

Its the season to give your Shopify store a festive makeover! Adding a touch of holiday magic to your online storefront can create a warm and inviting atmosphere for your customers. In this blog post, we’ll guide you through the process of incorporating a delightful Christmas effect into your Shopify store using a custom snowfall animation. With just a few simple steps, you can bring the spirit of the holidays to your e-commerce platform.

Step 1: Edit your theme

Step 2: Create a new section and add below code to it.

<script>
document.addEventListener(“DOMContentLoaded”, function () {
const snowContainer = document.body.appendChild(createSnowContainer());
const styleElement = createStyleElement();
document.head.appendChild(styleElement);

const config = {
particlesPerThousandPixels: 0.1,
fallSpeed: 1.25,
pauseWhenNotActive: true,
maxSnowflakes: 200,
};

const snowflakes = [];
let snowflakeInterval;
let isTabActive = true;

function createSnowContainer() {
const snowContainer = document.createElement(“div”);
snowContainer.className = “HGJMfTRhkxfUmCVRELzzvKvVPjxPud”;
return snowContainer;
}

function createStyleElement() {
const styleElement = document.createElement(“style”);
styleElement.textContent = `
.HGJMfTRhkxfUmCVRELzzvKvVPjxPud {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
z-index: 99999;
pointer-events: none;
}
.CvVVkuiXmFqtBhGBPuzxxWmgkumiNM {
position: absolute;
background-color: white;
border-radius: 50%;
opacity: 0.8;
pointer-events: none;
display:block!important;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

@keyframes fall {
0% {
opacity: 0;
transform: translateY(0);
}
10% {
opacity: 1;
}
100% {
opacity: 0.5;
transform: translateY(100vh);
}
}

@keyframes diagonal-fall {
0% {
opacity: 0;
transform: translate(0, 0);
}
10% {
opacity: 1;
}
100% {
opacity: 0.25;
transform: translate(10vw, 100vh);
}
}
`;
return styleElement;
}

function resetSnowflake(snowflake) {
const size = Math.random() * 5 + 1;
const viewportWidth = window.innerWidth – size;
const viewportHeight = window.innerHeight;

snowflake.style.width = `${size}px`;
snowflake.style.height = `${size}px`;
snowflake.style.left = `${Math.random() * viewportWidth}px`;
snowflake.style.top = `-${size}px`;

const animationDuration = (Math.random() * 3 + 2) / config.fallSpeed;
snowflake.style.animationDuration = `${animationDuration}s`;
snowflake.style.animationTimingFunction = “linear”;
snowflake.style.animationName = Math.random() < 0.5 ? “fall” : “diagonal-fall”;

setTimeout(() => {
if (parseInt(snowflake.style.top, 10) < viewportHeight) {
resetSnowflake(snowflake);
} else {
snowflake.remove();
}
}, animationDuration * 1000);
}

function createSnowflake() {
if (snowflakes.length < config.maxSnowflakes) {
const snowflake = document.createElement(“div”);
snowflake.classList.add(“CvVVkuiXmFqtBhGBPuzxxWmgkumiNM”);
snowflakes.push(snowflake);
snowContainer.appendChild(snowflake);
resetSnowflake(snowflake);
}
}

function generateSnowflakes() {
const numberOfParticles =
Math.ceil((window.innerWidth * window.innerHeight) / 1000) *
config.particlesPerThousandPixels;
const interval = 5000 / numberOfParticles;

clearInterval(snowflakeInterval);
snowflakeInterval = setInterval(() => {
if (isTabActive && snowflakes.length < config.maxSnowflakes) {
requestAnimationFrame(createSnowflake);
}
}, interval);
}

function handleVisibilityChange() {
if (!config.pauseWhenNotActive) return;

isTabActive = !document.hidden;
isTabActive ? generateSnowflakes() : clearInterval(snowflakeInterval);
}

generateSnowflakes();

window.addEventListener(“resize”, () => {
clearInterval(snowflakeInterval);
setTimeout(generateSnowflakes, 1000);
});

document.addEventListener(“visibilitychange”, handleVisibilityChange);
});
</script>
{% schema %}
{
“name”: “Christmas Effect”,
“settings”: [],
“presets”: [
{
“name”: “Christmas Effect”
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Step 3: Add “Christmas Effect” from Customize

{% schema %} { “name”: “Christmas Effect”, “settings”: [], “presets”: [ { “name”: “Christmas Effect” } ] } {% endschema %} {% stylesheet %} {% endstylesheet %} {% javascript %} {% endjavascript %}