1. What is Motion image banner?
The Motion image banner section turns a headline into an eye-catching scroll animation. A small image first appears inside the heading text; as customers scroll, it expands into a full-width banner with your heading, text, and buttons on top - a striking way to open a homepage or introduce a collection.
2. Section Components
| Section | Motion image banner | A banner that animates on scroll: an image placed inside the heading grows into a full-size banner with text and buttons. This section has no blocks - everything is set in the section settings. |
|---|---|---|
| Settings | Image (top of the panel) | Image, Mobile image, Image link, Overlay opacity, and Desktop/Mobile image height. |
| Before motion | The heading shown before the animation, with the image placed inside it using [img]. |
|
| After motion | The heading, text, and up to two buttons shown on the full banner after the animation. |
3. Location & Setup
To add the Motion image banner section:
- Go to "Online Store" > "Themes" > "Customize".
- Select where you want to place it and click "Add section".
- Search for Motion image banner (in the Banners category) and click on it to add.
4. Highlight Features
- Scroll-driven motion - the image grows from inside the headline into a full-width banner.
-
Inline image in text - place the image anywhere in the heading with
[img]. - Two content states - a short teaser heading before the motion, and a full message with up to two buttons after it.
- Separate desktop and mobile images and heights, including a Fullscreen option.
- Text highlights and separate light/dark mode colors.
5. Common Use Cases
🤔 How to set up the Motion image banner section?
Want a banner that grows from a small image inside your headline into a full-width visual as customers scroll? Here's how:
STEP 1: Add the section
At your desired position, click "Add section" and choose Motion image banner.
STEP 2: Add the image
Click on the Motion image banner section and upload an Image. Add a Mobile image if you want a different one on mobile.
STEP 3: Write the heading shown before the motion
In the Before motion group, edit the Heading. Type [img] where you want the small image to appear inside the sentence - e.g. "Immerse in a wide range of invaluable [img] significance at our store".
STEP 4: Add the content shown after the motion
In the After motion group, fill in the Heading, Text, and up to two buttons (First button label / Second button label with their links).
STEP 5:
Click "Save" when done.
⚠️ Note: The motion plays as customers scroll down the page: the image starts in line with the "Before motion" heading, then expands to fill the banner, and the "After motion" content appears on top of it. If the "Before motion" Heading is left empty, the section shows as a regular banner with the "After motion" content - no motion.
🤔 How to style the heading shown before the motion?
Click on the Motion image banner section and, in the Before motion group:
-
Heading - use
[img]to place the image inside the line. - Heading size - Small, Medium, Large (default), XL, 2XL, or 3XL. The inline image scales with the heading.
- Heading tag - H1-H6 or p, for SEO.
- Content alignment - Left, Center (default), or Right.
To change the heading color, scroll to Colors and set Heading before motion for light (and dark) mode.
Click "Save" when done.
🤔 How to set up the content shown after the motion?
Click on the Motion image banner section and, in the After motion group:
STEP 1: Add the text
- Enter the Heading and Text. Wrap words in
[]to highlight them, then pick the Highlight effect: Underline, Marker, Text color change, or Shadow (see Text highlight). - Choose the Heading size, Heading tag, and Text transform (None, Italic, Uppercase, or Italic and uppercase).
STEP 2: Add buttons (optional)
- Enter a First button label, then its First button link. (Optional) Once the link is added, turn on Open this link in a new tab.
- Choose the First button style: Primary, Secondary, Text link, or Direction link.
- Repeat with the Second button settings if you need two buttons. Leave a label empty to hide that button.
STEP 3: Position the content
- Content alignment - Left, Center, or Right.
- Desktop content position - Top, Middle, or Bottom of the banner.
STEP 4:
Click "Save" when done.
✅ Tip: If the text is hard to read over the image, raise the Overlay opacity (0-100%). It darkens the image after the motion only.
🤔 How to make the banner image clickable?
STEP 1:
Click on the Motion image banner section and enter an Image link.
STEP 2:
(Optional) Once the link is added, turn on Open this link in a new tab.
STEP 3:
Click "Save" when done.
🤔 What other customization options can you give your Motion image banner?
| For the whole Motion image banner section: | |
| ✨ Change the banner height | Choose the Desktop image height (450px, 550px, 650px, 750px, or Fullscreen) and the Mobile image height (400px, 500px, or Fullscreen). |
| ✨ Darken the image after the motion | Drag the Overlay opacity slider (0-100%). |
| ✨ Change the colors | In Colors, set the Heading before motion color and the Color scheme after motion, for light and dark mode. |
| ✨ Add padding or a divider | In Section layout, adjust Top padding and Bottom padding (0-100px), or turn on Show section divider. |
6. Change Logs
Version 2.2.0 - October 2026
- Changed – Heading size: Both headings (Before motion and After motion) follow the theme's new type scale (Theme settings > Typography), with three larger options - XL, 2XL, and 3XL - on top of Small, Medium, and Large.
7. Support Information
Need help? Contact our support team at Omni Themes Support
