1. What is a Segmented banner?
The Segmented banner section is designed to create visually striking banners that divide content into three distinct segments, perfect for showcasing promotions, announcements, or key visuals. It features numbered segments (e.g., "01," "02," "03") that can represent different offers or highlights, adding a structured layout to your design.
2. Section Components
| Section | Segmented banner | Display a banner section with multiple segments to the store. |
|---|---|---|
| Available block | Segmented banner | Displays an image, heading, and content for each segment. |
3. Location & Setup
To add and set up the Segmented banner section:
- Go to "Online Store" > "Themes" > "Customize".
- Decide where you want to place the new section.
- Click "Add Section".
- Select "Segmented banner".
4. Highlight Features
- 70:30 Layout Split: 70% of the banner is for the main content, the 30% area is divided into 3 equal segments that are interactive.
- RTL Adaptation: The section adjusts seamlessly for right-to-left (RTL) languages and layouts.
- Clickable segment images: Link each segment's image to a product, collection, or page, with an animated cursor shown on hover.
5. Common Use Cases
🤔 How to set up the Segmented banner section?
Don't know where to start with your Segmented banner? Just follow these steps:
STEP 1: Add the section
Add the Segmented banner section, and you will have 3 Segmented banner blocks by default.
STEP 2: Customize the look of each block (a.k.a each banner):
Click on a Segmented banner block to open its setting panel, and change these settings:
- Image: Assign an image as the banner. For a separate image on mobile, add it to the Mobile image.
-
Video: Add a video instead of an image, or embed a video from a URL by entering a Youtube or Vimeo video link into the URL field.
⚠️ Note: If both Image and Video are added, only the video will display. - Banner content: Enter heading, button label, and adjust its size and position.
STEP 3: Customize the whole section:
In the Segmented banner section settings, you can:
- Adjust the Content alignment.
- Change the height of the banner for desktop 🖥 in Hero desktop height and for mobile 📱 in Hero mobile height.
STEP 4: Click "Save" when done. If you want to explore more customization options, continue reading the next part.
🤔 How to link a segment's image and add a hover animation?
Goal: Make a segment's image clickable, taking customers to a product, collection, or page.
STEP 1: Add the link
Click on a Segmented banner block and find Link (below Overlay opacity). Enter the URL, and turn on "Open this link in a new tab" if needed.
STEP 2: Control the hover animation
Click on the Segmented banner section, under Animation, toggle Show animated cursor (on by default):
- ON - hovering over a linked segment shows an animated cursor.
- OFF - hovering still shows a pointer/hand cursor (so customers can tell it's clickable), just without the animation.
⚠️ Note: This setting has no effect on segments that don't have an image link. To change the cursor's colors, go to Theme settings > Animation > Animated cursor.
STEP 3: Click "Save" when done.
🤔 What customization options can you give your Segmented banner?
| For the whole Segmented banner section: | |
| ✨ Change transition color scheme |
Click on the Segmented banner section, find the Colors setting group, and set the Transition color for both light and dark versions (this color appears when hovering over the next section or during transitions). |
| ✨ Add a top & bottom padding to the section |
Click on the Segmented banner section, and scroll down to the Section layout group, where you can change Top padding and Bottom padding. |
| For a single Segmented banner block: | |
| ✨ Change the heading size |
Click on the Segmented banner section, and choose the Heading size to be Small, Medium, or Large. |
| ✨ Change the Heading tag (for SEO purposes) |
Click on the Segmented banner section, find and choose the Heading tag from the list. |
| ✨ Change the button's style |
Click on the Segmented banner section, find and choose the style you want in Primary button style, Second button style, or Link button style. |
| ✨ Change the content position |
Click on the Segmented banner section, find and choose the Content position to be Top, Bottom, or Center. |
6. Change Logs
Version 2.1.0 - September 2026
- New - Link: Segment images can now link to a product, collection, or page, with an animated cursor shown on hover (configurable).
7. Support Information
Need help? Contact our support team at Omni Themes Support
