How to add wow.js/animate.css on shopify?

@wilmer.lemke 

To add wow.js/animate.css animations to your Shopify website, you can follow these steps:

1. Add wow.js and animate.css to your theme:

• Go to https://wowjs.uk/getting-started and download the wow.js library.
• Copy the wow.js file into your theme's assets folder.
• Go to https://animate.style/ and download the animate.css library.
• Copy the animate.css file into your theme's assets folder.

1. Link wow.js and animate.css in your theme's layout file:

• In your Shopify admin, go to Online Store > Themes.
• Click on the Actions dropdown next to your current theme and select Edit code.
• Find your theme's main layout file (usually theme.liquid or layout/theme.liquid) and open it for editing.
• Add the following code before the closing tag to link wow.js and animate.css:

1
2

<link rel="stylesheet" href="{{ 'animate.css' | asset_url }}">
<script src="{{ 'wow.js' | asset_url }}"></script>

1. Initialize wow.js in your theme's script file:

• Find your theme's main script file (usually theme.js or main.js) and open it for editing.
• Add the following code to initialize wow.js and specify the animations you want to use:

1

new WOW().init();

1. Add wow.js classes to your HTML elements:

• Find the elements you want to animate on your Shopify website (e.g., images, text, buttons).
• Add the wow.js classes to these elements to apply the animations. For example, you can use classes like wow, animate__animated, and animate__bounce to create a bounce animation.
• Here's an example of how you can add the wow.js class to an element in your HTML:

1

<div class="wow animate__bounce" data-wow-duration="2s">Animated element</div>

1. Save your changes and preview your website:

• Save the changes you made to your theme's assets, layout file, and script file.
• Refresh your Shopify website to see the wow.js/animate.css animations in action.

That's it! You have now successfully added wow.js/animate.css animations to your Shopify website.