User Guide

Search limit to:






Segmented banner

by Admin on Oct 03, 2025

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

Display a banner section with multiple segments to the store.

Available block

Displays an image, heading, and content for each segment.

3. Location & Setup

  1. Go to "Online Store" > "Themes" > "Customize".
  2. Select where you want to place it.
  3. Click “Add Section”.
  4. Search for Segmented banner.
  5. Click on it to add.

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.

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 video from 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.

 

🤔 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 you can set up 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, and you will be able to 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 on Top, Bottom or Center.

Need help? Contact our support team at Omni Themes Support.