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
What are Animated Image and Text Sections?
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.
Why Use Animated Image and Text Sections?
There are several reasons to consider using animated image and text sections on your Shopify store:
- Increased Engagement: Animations can effectively capture user attention and make the content more visually appealing compared to static text blocks.
- Enhanced Communication: The combination of image and text allows you to convey information in a clear and concise way, highlighting key points or product features.
- Improved Design Flexibility: These sections offer a versatile design element that can be adapted to various marketing campaigns or product presentations. You can choose different image styles, text layouts, and animation effects to suit your brand identity.
- Mobile-Friendly Design: The code likely ensures the section displays and functions well on mobile devices, where a significant portion of your traffic might come from.
Additional Considerations:
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:
-
Animation Choice:
- Balance is Key: Avoid overwhelming animations that might distract users from the core message.
- Complement the Content: Choose animation styles that complement the text and image, enhancing understanding rather than creating confusion.
- Mobile Optimization: Ensure the animations display and function smoothly on mobile devices, where users might have limited screen space and slower loading times.
-
Content Strategy:
- Clarity and Concision: Keep the text overlay concise and clear. Users should be able to grasp the message quickly within the limited space.
- Targeted Messaging: Tailor the text content to resonate with your target audience and align it with the overall marketing campaign or product information being presented.
- Call to Action: Consider incorporating a clear call to action within the text or design to encourage users to take a desired action (e.g., "Shop Now," "Learn More").
-
A/B Testing:
- Test Different Variations: Consider A/B testing different combinations of images, text, and animation styles to see what resonates best with your audience and leads to higher engagement rates.
What you are buying:
- Catchy animated image with text
- Works well with mobile
- Animation restarts when the customer go back at the very top and scroll down again
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
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.
Steps on how to add Animated Image and Text Sections to Your Shopify Store
Step #1. Open your code editor
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.
Step #2. Create a new section file
In Section folder, create a new section, name it "animated-image-text". Then paste the code below.
Step #3. Add javascript code
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.
Step #4. Save the changes
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
Step #5. Customize theme
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.
Conclusion
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.
Copied!