每到北美的冬天，很多独立站都会开始参加黑五活动以及开始为圣诞节准备网站，氛围感的来源很多：节日性的海报，圣诞专用的礼物包装，黑五折扣等等。
但是今天我想要教会你们另外一种增加网站氛围感的方式，如何通过一段代码来实现shopify网站下雪的效果，目的是为了让客户觉得你的网站更有趣。让客户停留更多的时间。
1. 进入代码编辑后台
- 登录 Shopify 后台。
- 点击 在线商店 (Online Store) -> 模板 (Themes)。
- 在当前主题上点击 … -> 编辑代码 (Edit code)。
2. 找到 theme.liquid 文件
在 Layout 目录下找到 theme.liquid。这是你网站的主模板文件。
3.粘贴以下代码
{% comment %}
Created from Jixindesign
{% endcomment %}
<style>
#snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}
.snowflake {
position: absolute;
top: -10px;
color: #fff; /* 雪花颜色，可改为其他颜色 */
user-select: none;
cursor: default;
opacity: 0.8;
animation-name: fall;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes fall {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(105vh) rotate(360deg); }
}
</style>
<div id="snow-container"></div>
<script>
(function() {
const snowContainer = document.getElementById('snow-container');
const snowflakeCount = 30;
const snowflakes = ['❄', '❅', '❆', '•'];
for (let i = 0; i < snowflakeCount; i++) {
createSnowflake();
}
function createSnowflake() {
const flake = document.createElement('div');
flake.className = 'snowflake';
flake.innerHTML = snowflakes[Math.floor(Math.random() * snowflakes.length)];
const size = (Math.random() * 10 + 10) + 'px';
const left = Math.random() * 100 + '%';
const duration = (Math.random() * 10 + 10) + 's';
const delay = (Math.random() * 5) + 's';
flake.style.fontSize = size;
flake.style.left = left;
flake.style.animationDuration = duration;
flake.style.animationDelay = delay;
flake.style.filter = 'blur(1px)';
snowContainer.appendChild(flake);
}
})();
</script>💡进阶功能：如果你只想在首页下雪，可以用 Liquid 标签包裹代码：
{% if template == 'index' %}
{% endif %}总结：
上述代码经过特殊优化采用原生CSS写法，不会影响网站的打开和加载速度放心使用~