Maximize Theme User Guide

Animation

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

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

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 is applied extensively across the theme, all the positions where Primary buttons or Secondary buttons appear, except for Video button (sound, play).

🤔 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	Drawer menus (promotion images and collection images) Categories menus (collection images) Blog menus (blog images) Tabbed menus (promotion images) Column menu (promotion images).
Search Functionality	Search bar Search result
Sections	Promotion grids Promotional collections Collection lists Highlighted product sets Text with image cards Image with text Logo lists Motion image banners Product comparison grid Product comparison popup Product bundle, Blog posts Related collections on collection pages, Image blocks within the Product Information section of the product page.
Others	Blog page Footer Cart drawer, Cart upsell, Mini-carts Cart page.

4. Support Information

Need help? Contact our support team at Omni Themes Support