How to Add a Snow Falling Effect to Your Shopify Site

How to add snowflakes falling to your ecommerce site

I talk a lot about making sure the appearance of your online store looks professional.  A couple of weeks ago I also wrote about 5 ways to maximize your holiday online store sales.

 

I believe the way your site looks is extremely important.  People make purchasing decisions based on how they feel.  If you site looks like it hasn’t been updated in years, people notice this.

copyright in the footer outdated on ecommerce site

Conversely if your site is always fresh and things are changing, people want to come back.  It also lets people know that you are real.  Your company exists.  The same way that having an 800 number for your online store helps.

So when my wife said she wanted snow for the Holidays, I obliged.  We live on Miami Beach so we don’t get any snow.  Its the end of December and we are still sweating.

Anyhow, my wife had seen another website that had the snow effect and she wanted it for her site.

What Snow Do You Want on Your Shopify Store

The first step is to decide which snow effect you like.  There are quite a few of them out there.
snow-falling-onwebsite
snow effect on website

My wife decided on the actual little flakes like so that’s what she got.

snow falling on shopify site

Look at the pretty little flakes

Now its time to implement it.

Setting up the Snow on Your Shopify Site

The first step is to get the file that actually renders the snow and upload it to your Shopify site.  For the one my wife used, you can download the file here. For simplicity, you can download the jquery.snow.js file.

Once this is downloaded to your computer you are going to head over to your Shopify admin and navigate to your theme page.

adding code to add snow to ecommerce site

Once on your theme page you are going to click the three little dots at the top right of the screen and click on Edit HTML/CSS

 where to modify shopify code for jquery

From here you are going to scroll down the list to assets on the left side of the screen.  Click on the Asset folder and a link will appear to “Add a new Asset.”  Click on that and a window like this will appear.

 edit html to add snow falling effect

Here you will click to upload the file that you just downloaded which is your actual snow effect js file.  Once uploaded, you are half way there.  You now have the file needed to make the snow.  We just have to fire it up and actual make it snow on your site.

Firing Up the Snow Effect on Shopify

Because this effect uses jquery, we are going to have to make sure it’s running on your site to get it working.  Almost all sites will already have jQuery running for other functionality on your site.

Navigate to your theme.liquid file under layout in the same window we were working on before.  Within the theme.liquid file we are going to want to insert some code to load the snow effect in the background.

If you are not sure if jquery is already running then we are going to insert these two lines to fire it up.

<!-- Snow Effect -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
{{ "jquery.snow.js" | asset_url | script_tag }} <!-- End Snow -->
If you know you already have jquery being called on your site, you can just place the following lines below that portion.  This is all within the HEAD of your site on the theme.liquid page.
<!-- Snow Effect -->
{{ "jquery.snow.js" | asset_url | script_tag }} <!-- End Snow -->
Save that change and it’s time to make it snow…

Insert the Snow Effect on the Shopify Pages You Want

Now you have the snow maker on your site and you are starting the machine.  The last step is to just decide which pages you actually want it to snow on.  I wouldn’t recommend using it everywhere.  You don’t want it on checkout pages and other areas where visitors may be annoyed.

My wife wanted it on the home page, her blog, and the product page.

To do this you are going to navigate to the respective page in the same editor we have been working on.  In her theme the product page is called product.liquid and the blog page is called blog.liquid.  Your theme almost certainly has similar names so you can figure out whats what.

HINT:  The home page is often called index.liquid

Once you go into these pages you will find some space and paste the following code onto the page.  I pasted it on the top so I can easily find it once we are tired of the snow.

<!-- Snow -->
<script>
$(document).ready( function(){
$.fn.snow();
});
</script>
<!-- End Snow -->

Save your changes and head back to your site.  Press Shift and F5 a couple of times to force a new refresh of the page and it should be snowing.

Some Advanced Shopify Snow Features

If you want to get crazy and make the flakes a particular color or size, you can modify some attributes.

  1. minSize – min size of snowflake, 10 by default
  2. maxSize – max size of snowflake, 20 by default
  3. newOn – frequency in ms of appearing of new snowflake, 500 by default
  4. flakeColor – color of snowflake, #FFFFFF by default
This is how you would do that in the above code.  The FFFFFF is a hexcolor and you can pick any color and get the code for it here.
<!-- Snow -->
<script>
$(document).ready( function(){
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF' });
});
</script>
<!-- End Snow -->

So if you want to see the snow on my wifes fashion jewelry site, come take a peak.  It will only be snowing for the next two weeks so if you are reading this later you can watch the snow year round here.

Are You Ready To Start Your Own Online Business?

Start An Online Store Crash Course

Sign up now to receive our 5 Step FREE Crash Course to starting your own online store. Learn the tricks we have used with clients for years. Get started building your future now.

  • FREE 5 Step Crash Course
  • Designed For Beginners
  • Receive our Resource Guide Instanlty
  • Start Now By Entering Your Email Below