Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business.

Create falling snow effect for your Shopify store


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 unofficialshopify-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.


    Give your snippet the name unofficialshopify-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.
  •     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:
  
       ,
    {
      "name": "Falling Snow Effect",
      "settings": [
        {
          "type": "checkbox",
          "id": "unofficialshopify_enable_effect",
          "label": "Enable effect"
        },
        {
          "type": "text",
          "id": "unofficialshopify_number_of_snowflakes",
          "label": "Set the number of snowflakes",
          "default": "30"
        },
        {
          "type": "text",
          "id": "unofficialshopify_speed_of_sinking",
          "label": "Set the speed of sinking (recommended values range from 0.3 to 2)",
          "default": "0.8"
        },
        {
          "type": "text",
          "id": "unofficialshopify_maximum_size_snowflakes",
          "label": "Set the maximum-size of your snowflakes",
          "default": "40"
        },
        {
          "type": "text",
          "id": "unofficialshopify_minimal_size_snowflakes",
          "label": "Set the minimal-size of your snowflakes",
          "default": "8"
        }
      ]
    }

  • Click Save.


Step 3: Include the unofficialshopify-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:

                                      {% include 'unofficialshopify-snowflakes' %}






    Demo

source : shopifytips.com

Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business.

Create falling snow effect for your Shopify store Create falling snow effect for your Shopify store Reviewed by Navjeet Singh on December 03, 2016 Rating: 5

2 comments:

  1. Thank you sir. YOu saved my $3 to $5. Thank you for such a great article.

    ReplyDelete

Powered by Blogger.