Create falling snow effect for your Shopify store

Hura Product Showcase Builder

Snowfall Effect is an app in Apps store of Shopify. This app allows you to add a “falling snow” effect to your Shopify store with no coding required! It provides an easy way to add some Holiday Cheer to your Shopify powered site. The easy one click means anyone can add a “falling snow” effect. But you want to add snowfall effect to your Shopify store manually.

This article will guide for you create this effect for your store. And you can enjoy without having to pay any costs.

Here we go.

Step 1: Create a shopifytips-snowflakes snippet

  • Open this Liquid code snippet.
  • Select and copy all of the text.
  • In a new tab, open up your shop admin.
  • Go to the Edit HTML/CSS page.
  • Click the Snippets folder.
  • Under the Snippets folder, click Add a new snippet.

falling snow 1

  • Give your snippet the name shopifytips-snowflakes and click Create snippet.
  • In the online code editor, paste the content from your clipboard.
  • Click Save.

Step 2: Add to your Customize theme page

  • On the Edit HTML/CSS page, locate and click Config.
  • Under the Config folder, locate and click the settings_schema.json file. This will open the file in the online text editor.

falling snow 2

  • Scroll down to the very bottom of your settings_schema.json file and add this code before the last square bracket ] and after the last curly bracket } – make sure to include that first comma , since you’re modifying a JSON data structure:

  • Click Save.

Step 3: Include the shopifytips-snowflakes snippet in theme.liquid

  • Go to the Edit HTML/CSS page.
  • Under the Layout folder, locate and click the theme.liquid file to open it in the online code editor.
  • Look for the </body> tag and add the following code above it:

  • Save your changes.

Step 4: Configure your effect

You can now configure your falling snow effect using your Customize theme page:

  • Go to the Customize theme page.
  • Configure your falling snow effect in the Falling Snow Effect section:

falling snow 3

OK. Now you can access your site for check.

Falling snow effect demo

This demo shop has a falling snow effect.

If you get stuck in the process of work you can contact me to get help or hired me to do that.

Hura Theme Blocks

You may also like...

18 Responses

  1. Vero says:

    Work!, very nice, thanks, but can I change the snowflakes shape and look?

  2. Vero says:

    the snowflakes tool works on the web but leaves a weird black snowflake at the top left corner of every page, which causes problem when open a new link/page. To open a new link, now I have to click on the link and refresh it once more to make it appear, otherwise it’s show an empty page, why is that? any way to fix it?

  3. Sofia says:

    Hi! I just installed and enabled it, but now the Olark Chat won’t pop up! 🙁

    Any way to fix it?

    • Huynh Mai Anh Kiet says:

      Yes, I checked. This issue have reason by a variable in my code is duplicate with a variable in Olark code. Fix:
      – Open: shopifytips-snowflakes.liquid
      – In line: 30, 31, 39. You must change name of variable “opera” to “br_opera”
      – Save and check again.


  4. Nav says:

    How can I change the flakes to hearts?

    • Huynh Mai Anh Kiet says:

      Yes, you can. In shopifytips-snowflakes.liquid file:
      – Inline 11 change:
      var snowcolor=new Array(“#aaaacc”,”#ddddff”,”#ccccdd”,”#f3f3f3″,”#f0ffff”);
      var snowcolor=new Array(“red”);
      – And inline 13 change:
      var snowletter=”*”;
      var snowletter=”♥”;


  5. Neil Thornton says:

    I just want to say that this page has helped me so much. Thank You

  6. Jessica says:

    Excellent Thank you so much for such an easy tutorial you are the best.

  7. Karla says:

    Thanks for this tutorial! Super easy to follow, worked no problem!!

  8. Nat says:

    Hi, Just installed it and it works perfectly. Two questions:
    1) How can I make the effect visible only on my front page?
    2) Could I make it visible only 30 seconds?

    Thank you in advance,

    • Kiet Huynh says:

      Hi Nat,

      Yes, you can to do that.

      1. In step 3, replace the code to
      {% if template contains 'index' %}{% include 'shopifytips-snowflakes' %}{% endif %}

      2. You can add the below javacscript code in theme.liquid file:
      <script>setTimeout(function(){for (i = 0; i < 20; i++) {var snow = document.getElementById('s'+i);snow.parentNode.removeChild(snow);}, 30000);</script>
      I hope it's helpful for you.

      • Kris says:

        Hi Kiet,

        I don’t know if this is still valid. I want to set a time of 30 seconds and add the following code before in theme.liquid, but it does not work. Can you help? Any information that you can provide would be greatly appreciated. Thank you in advance for your help.

        setTimeout(function(){for (i = 0; i < 20; i++) {var snow = document.getElementById('s'+i);snow.parentNode.removeChild(snow);}}, 30000);

  9. Nat says:

    1 worked like a charm!

    2 unfortunatelly didn’t stop the effect on 30seconds 🙁
    Any specific on where to place it on theme.liquid?

    Thank you,

  10. Kelly says:

    Wow such a cool feature
    Your instructions are also extremely clear so thank you so so much for sharing this info!

  11. Rohan says:

    Unable to see on my site. Did the exact step by step thing. Can you please help. Thanks again!

Leave a Reply

Your email address will not be published. Required fields are marked *