1. What is Promotion Banner?
The Promotion Banner section creates eye-catching visual elements to highlight special offers, promotions, or events with attention-grabbing graphics, text, and interactive elements. It serves as a powerful tool for brand reinforcement and user engagement, directing visitors to specific actions or pages through clickable elements.
2. Section Components
| Section | Promotion Banner | Displays promotional content with multiple images, text, and interactive elements. |
|---|---|---|
| Available Blocks | Text | Used to show headings, subheadings, and promotional descriptions. |
| Buttons | Used to create up to two call-to-action buttons with custom styling. | |
| Banner Menu | Used to show featured collections and navigation options. | |
| Countdown Timer | Used to show urgency with standard or evergreen countdown timers. |
3. Location & Setup
To add & set up the Promotion Banner section:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Decide where you want to place the new section.
- Click "Add Section"
- Select "Promotion Banner"
4. Highlight Features
- Multi-Image Support: Up to 3 desktop images and 1 mobile image
- Hero Section Mode: Optimized loading as the main page introduction
- Advanced Timers: Standard and evergreen countdown options
- Smart Linking: Banner-wide and individual element linking
- Responsive Design: Separate configurations for desktop and mobile
- Visual Customization: Overlay opacity, positioning, and alignment controls
- Navigation Integration: Menu display for custom links on the banner
5. Common Use Cases
🤔 How to create a basic promotion banner quickly?
STEP 1: Add Promotion Banner section to your desired position
STEP 2: In the Promotional banner setting panel, upload 1-3 desktop images and 1 mobile image. Set the Banner link for overall image clickability.
STEP 3: Under the section, add a Text block and enter the content into Heading, Subheading, and Text (for description).
Some customization options for your Text block:
- Put some words of the Heading into the square brackets [ ] for text highlight effect.
- Add a color for the Content box (light/dark) and change its type to be Round or Square in the Content box type.
- Turn on Add frame to show a border around the box.
STEP 4: Under the section, add a Buttons block. You can set up to 2 buttons by entering the label and link.
STEP 5: In the Promotional banner setting panel, adjust the Image overlay opacity to make your content easy to read.
STEP 6: Click “Save” and preview.
🤔 How to create a flash sale banner with a countdown timer?
STEP 1: Set up the basics of the banner, following the steps in the use case "How to create a basic promotion banner quickly?" above.
STEP 2: Under the Promotion Banner section, add a Countdown Timer block.
STEP 3: There are 2 kinds of countdown timers for you to choose from:
Option 1: Countdown type = “Standard timer”
🔍 Note: The standard timer counts down to one fixed date, with no restarting!
To set it up:
- Choose the right Time zone.
- Set the exact End date when the countdown should finish.
Option 2: Countdown type = “Evergreen timer”
🔍 Note: The evergreen timer automatically restarts when the time is up!
To set it up:
- Set the Duration (per loop) and Unit (for example: 3 days - so after 3 days, the countdown will restart).
- Choose the right Time zone.
- Set the exact Start date when the countdown should start.
STEP 4: Click “Save” when done.
🤔 How to customize the layout of the countdown timer?
The countdown timer block might be a little tricky to style. So here is a cheatsheet explaining how it works for you:
In the Countdown timer block setting panel, find the Timer style setting group, and you can see the options below:
-
Timer style:
⚠️ Note: This setting only works when you’ve already set a Background color for the timer.
| Square | Round |
 |
 |
-
Line and border:
⚠️ Note: You can only see the line and border if you do not set the Background color.
| None | Border | Vertical line |
 |
 |
 |
-
Overlay opacity & Colors:
⚠️ Note: The Overlay opacity works with the Background color setting inside the Colors group.
| Overlay opacity = 0% | Overlay opacity = 100% |
 |
 |
🤔 How to show custom links on the promotion banner?
You can display links to other important pages on the announcement bar just by doing these steps:
STEP 1: Set up the basics of the banner, following the steps in the use case “How to create a basic promotion banner quickly?” above.
STEP 2: Preparing a menu in the Shopify admin
- In the Shopify admin, click on the Content tab > Menu > “Create menu”.
- Give the menu a Name, and click “Add menu items” to assign menu labels and links > click “Save”.
Note: Only the first level of your menu will be shown on the promotional banner.
STEP 3: Add the Banner menu block under the Promotional banner section.
STEP 4: In the Menu setting, click “Select” and choose the menu you created in step 2.
STEP 5: Adjust the Menu text size, reorder the block position, and turn on Display on mobile if needed.
STEP 6: Click “Save” when done.
6. Support Information
Need help? Contact our support team at Omni Themes Support.
