How To Add Snow Effect in Shopify?
Installing a Fresh Version of the Dawn Theme
To ensure a clean slate for our snow effect, we’ll start by installing a fresh version of the Dawn theme. Simply scroll down in your Shopify dashboard, click on ‘Online Store,’ and add the fresh Dawn theme. This step helps prevent any interference from old codes in your new theme.
Uploading Snow Files
Next, we need to upload the files responsible for creating the snow effect. I’ve provided three image files (snow1, snow2, and snow3) that you’ll need for this effect. In your Shopify dashboard, navigate to ‘Online Store,’ click on ‘Files,’ and upload these three files. You can find the files and code in the video description or blog post linked below.
Editing the Code
Now that we have our files uploaded, let’s add the code to enable the snow effect. Head to ‘Online Store’ > ‘Themes,’ click on the three dots next to your theme, and select ‘Edit Code.’ We’ll be working with the base.css file, but if your theme doesn’t have it, you can use theme.css or even add the code directly to theme.liquid.
Pasting the Code
Scroll down to the bottom of the base.css file and add a line break. Copy the provided CSS code from the description or blog post and paste it here. Make sure to replace the image file names in the code with the URLs of the files you uploaded earlier. Save your changes.
body {
position: relative;
background:#d2d2d2;
}
body:after {
content: '';
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url('https://cdn.shopify.com/s/files/1/0601/0185/3358/files/snow1.webp?v=1700985285'), url('https://cdn.shopify.com/s/files/1/0601/0185/3358/files/snow2.webp?v=1700985285'), url('https://cdn.shopify.com/s/files/1/0601/0185/3358/files/snow3.webp?v=1700985285');
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
} Previewing Your Store
With the code in place, let’s preview your store. Voila! The snow effect should now be visible, giving your store a festive and wintry vibe. Remember, once the holiday season is over, simply remove the base CSS code to revert to your normal store appearance.
Image Assets:
https://drive.google.com/drive/folders/1p5fv5oTdc6V67MkYW1S2pQssLWr6Oa9b?usp=sharing
