1. What setup can you do in Animation?
- Use case 1: Choose a style of animation when hovering over the BUTTON
- Use case 2: Choose a style of animation when hovering over the IMAGE
- Use case 3: Choose a style of animation when hovering over a TEXT LINK BUTTON
2. Location & Setup
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Click the Theme Settings tab.
- Go to Animation.
3. Common Use Cases
🤔 How to set up the BUTTON animation & its affected areas?
Add a layer of interactivity to your store by customizing how buttons react when a customer hovers over them.
1. How to set up?
- In Theme Settings > Animation tab > locate the Button hover animation dropdown.
- Choose your preferred animation style:
- 🔶 None: Buttons remain static on hover.
- 🔶 Opacity: Buttons slightly fade when hovered over.
- 🔶 Thicken: A dynamic color-fill effect that starts as a circle around the customer's cursor and expands to cover the entire button on hover.
- Click Save to apply your changes.
2. Where the animation applies?
The Button hover animation applies to all positions where Primary buttons or Secondary buttons appear across your store, except for Video buttons (sound, play).
⚠️Note: This setting applies to button styles "Primary" and "Secondary" only. For the "Text Link" button style, see the Text link button hover animation setting below.
🤔 How to set up the IMAGE animation & its affected areas?
This setting adds a dynamic visual effect to your store's imagery, making your layout feel more interactive.
1. How to set up?
- In Theme Settings > Animation tab > locate the Image hover animation dropdown.
- Choose your preferred animation style:
- 🔶 None: The image remains completely static when hovered over.
- 🔶 Zoom In: The image smoothly scales up (zooms in) within its container when a customer hovers over it.
- Click Save to apply your changes.
2. Where the animation applies?
⚠️Note: This animation will only apply to images that are hyperlinked (images that customers can click to navigate to another page). Static, non-linked images will not animate.
Here is where you will see the image animations take effect:
| Store Area | Affected Elements |
| Menu & Navigation |
|
| Search Functionality |
|
| Sections |
|
| Others |
|
🤔 How to set up the TEXT LINK BUTTON animation & its affected areas?
This setting controls how buttons styled as text links behave when a customer hovers over them — adding animated underlines, color transitions, or directional motion.
1. How to set up?
- In Theme Settings > Animation tab > locate the Text link button hover animation dropdown.
- Choose your preferred animation style:
- 🔶 None: Text link buttons remain static on hover.
- 🔶 Flow: An underline runs from left to right and the text color changes on hover. On mouse-out, the line continues running out and the color resets at the same speed.
- 🔶 Rise: The text jumps upward, an underline runs from left to right, and the text color changes on hover. On mouse-out, the text settles, the line retracts, and the color returns.
- 🔶 Arrow push: The text pushes upward, an arrow appears, and the underline extends on hover. On mouse-out, the text, arrow, and underline all return to their original positions.
- Click Save to apply your changes.
2. Where the animation applies?
⚠️Note: This setting applies to button style "Text Link" only. On mobile and tablet, hover animations do not play — text links retain their static underline appearance without animated effects.
Here is where you will see the text link button animation take effect:
| Store Area | Affected Elements |
| Sections |
|
| Menu |
|
| Product & Cart |
|
| Navigation & Page |
|
| Others |
|
4. Change logs
🚩 Version 1.6.0:
Added new Text link button hover animation setting with four options (None, Flow, Rise, Arrow push) - controls hover animation for buttons styled as "Text Link" across the theme.
🚩 Version 1.5.0:
New theme setting: Animation, select which animation is applied to theme elements such as button and image.
5. Support Information
Need help? Contact our support team at Omni Themes Support
