User Guide

Search limit to:






Promotion banner #1 - #2 - #3 - #4 - #5

by Admin on Aug 18, 2025

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.

1. Section Components

Section Promotion Banner Displays promotional content with multiple images, text, and interactive elements.
Available block Text Show headings, subheadings, and promotional descriptions.
Buttons Create up to two call-to-action buttons with custom styling.
Banner menu Show featured collections and navigation options.
Countdown timer Show urgency with standard or evergreen countdown timers.

2. 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 in Template.
  • Click "Add Section".
  • Select "OT: Promotion banner (#number of variant)".

3. Highlight Features

  • Multi-Image Support: Up to 3 desktop images and 1 mobile image
  • Hero Section Mode: Optimized loading as the main page introduction
  • Visual Customization: Overlay opacity, positioning, and alignment controls
  • Navigation Integration: Menu display for custom links on the banner

4. 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 settings 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: Set up the countdown timer

To set it up:

  • Choose the right Time zone.
  • Set the exact time when the countdown should finish.

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:
None Border
   
  • 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.

5. Layout Recommendations

The Promotion banner section has 5 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us!

📂 Promotion banner #1

Check out demo here.

📂 Promotion banner #2

Check out demo here.

📂 Promotion banner #3

Check out demo here.

📂 Promotion banner #4

Check out demo here.

📂 Promotion banner #5

Check out demo here.

6. Support Information

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