Search limit to:






Promotion spotlight

by Admin on Oct 05, 2025

1. What is the Promotion Spotlight section?

The Promotion Spotlight section grabs user attention by sharing key messages, promotions and creates a sense of urgency with the countdown timer. Its functions can be flexibly utilized by either independently highlighting its surrounding, or by combining with other sections to create a powerful promotion group.


2. Location & Setup

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

3. Section Components

Section

Adds & customize image, customize the section layout and colors.

Available block

Displays icons with customizable image and size to visually enhance your message.


Adds heading, description and coupon code with customizable font styles, size, and coupon color.


Display a customizable countdown timer, visually urging customers to take action within the remaining time.


Creates a call-to-action button, allowing visitors to take immediate action.

 


4. Core Features

  • Create a sense of urgency: Set up the countdown (timer, column spacing and color) and call-to-action button to urge visitors to take immediate action.
  • Attention attraction tool: Customizable icon, text and coupon code to fit your promotion strategy.
  • Responsive Design: Adjusts seamlessly to different screen sizes for better user experience.

5. Common Use Cases

🤔 How to set up the Promotion Spotlight section?

Want to add and set up the Promotion Spotlight section? Here's how:

STEP 1: Add a background image

Click on the Promotion Spotlight section to open its settings panel and:

  • Add an Image as the section background (optional).

STEP 2: Add the icon

Click on the Icon block to open its settings panel, then you can:

  • For the icon, you have 3 options:
    • Choose an Icon from the dropdown list.
    • Find your favorite icon from the Theme icon list and paste it into the Use another icon field.
    • Upload a Custom icon image.

STEP 3: Add the text & coupon code

Click on the Text block to open its settings panel, then you can:

  • Enter the Heading and Text to add the content.
  • Enter the Coupon code (one of your active discount code in the admin editor).

STEP 4: Add the countdown timer & button

Click on the Countdown Timer block to open its settings panel, then you can:

  • Customize the Time zone, Year, Month, Day, Hour and Minute settings to set up the countdown.

STEP 5: Add the button

Click on the Button block to open its settings panel, then you can:

  • Add the Button label and Button link.
  • Enable Open this link in a new window if you want to redirect the users into a different tab.

STEP 6:

Click "Save" when done.

 

🤔 What customization options can you give your Promotion Spotlight?

For the whole Promotion Spotlight section

✨ Change color scheme

Click on the Promotion Spotlight section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme.

✨ Change the Image overlay capacity

Click on the Promotion Spotlight section, adjust the Image overlay opacity (0-100%) to visibly display overlay text.

✨ Add a border to the section

Click on the Promotion Spotlight section, enable the Show border to wrap the section in a thin border.

✨ Change the background image height

Click on the Promotion Spotlight section to open its settings panel and:

  • In Desktop layout setting group, adjust these settings to best demonstrate your contents on desktop:
    • Minimum background image height (150-450px).
    • Content alignment, Column spacing and Row spacing.
    • Do the same in the Mobile layout setting group for mobile demonstration.
  • Customize the Section Layout setting group for the section's look in relation to its surroundings:
    • The Section width dropdown offers 3 width options (Page Width, Full Width, Full Width Padded).
    • The Top padding and Bottom padding ranges 0-100px.

✨ Change the content alignment

Click on the Promotion Spotlight section, in the Desktop layout setting group, set Content alignment to be Left, Center or Right for the desktop display.
Repeat the same process in the Mobile layout setting group for the mobile display.

✨ Change the column and row spacing

Click on the Promotion Spotlight section, in the Desktop layout setting group, drag to adjust Column spacing and Row spacing (0-100px) for the desktop display.
Repeat the same process in the Mobile layout setting group with the Row spacing for the mobile display.

✨ Change the section width, add padding, or add a divider

Click on the Promotion Spotlight section, and scroll down to the Section layout setting group, and you will be able to change those settings.

 

🤔 What customization options can you give your Promotion Spotlight blocks?

Option

How to set it up?

✨ Change the icon size

Click on the Icon block, drag to adjust the Icon size (0-100px).

✨ Add highlight effect to the heading

Click on the Text block:

  • When entering the Heading in the Text block, wrap the text you want to highlight between [] brackets.
  • Choose the Highlight effect style to be Underline, Marker, Text color change or Shadow.

✨ Change the heading size

Click on the Text block, and choose the Heading size to be Small, Medium, or Large.

✨ Transform the Heading text

Click on the Text block, find and choose the Text transform to be None, Italic, Uppercase or Italic and Uppercase.

✨ Change the heading alignment

Click on the Text block, find and choose the Heading alignment to be Left, Right, or Center.

✨ Change the Heading tag (for SEO purposes)

Click on the Text block, find and choose the Heading tag from the list.

✨ Change the Text size

Click on the Text block, find and choose the Text size to be Small, Medium, or Large.

✨ Change the countdown timer text size, border, or adjust background overlay

Click on the Countdown timer block, and in the first setting group, you will be able to change those settings.

✨ Change the countdown timer column spacing

Click on the Countdown timer block, scroll down to Column Spacing, and drag to adjust your preferred spacing in the Desktop layout and Mobile layout setting group (for desktop 🖥️ and mobile 📱 respectively).

✨ Change the color of countdown timer (timer, line and border, timer background)

Click on the Countdown timer block, scroll down to the Colors setting group and you will be able to change those settings in light or dark mode.

✨ Change the button style

Click on the Button block, and choose the Button style to be Primary, Secondary, or Text link.


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