Compatibility: All Shopify themes.
Create an overlapping animated image text section in your website.
Was it possible to create an animation without applying it to all the sections in your website? Yes, most web developers will add an aos external library to do the work. Lets do this without a library though. Let our simple code do the work.
Check DEMO store here ð» . Password: made4uo
Animated image and text sections are visual elements that combine an image with overlaid text, often accompanied by animation effects. These sections can be placed strategically on your store's pages to grab user attention and communicate important messages.
There are several reasons to consider using animated image and text sections on your Shopify store:
While animated image and text sections offer a visually captivating way to communicate with your customers, here are some additional factors to consider for successful implementation:
What you are buying:
What makes our code better:
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code.
In Section folder, create a new section, name it "animated-image-text". Then paste the code below.
Since we are listening to the user's scrolls, lets add a javascript code. There is a way to do it with CSS but not all browsers were supporting it. Anyway, in the Asset folder, open the global.js.
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Make sure to SAVE once you are done customizing.
Note: I would suggest placing it as a third section or greater, so javascript have time to scroll and call the animation.
By incorporating animated image and text sections on your Shopify store, you can create dynamic and engaging elements to showcase products, highlight promotions, or deliver key messages to your customers. However, ensure you follow the proper steps and consider consulting a developer if needed to avoid any issues with your store's functionality.
Sign up free to view the code. Every snippet on the site is free, and stays free. You just need an account.
The code on this page is free, and it stays free. If it saved you an afternoon, you can send a tip. Entirely optional, and it keeps the next tutorial coming.
Did this tutorial work for you?