Adding a new Countdown block to the Announcement Bar section

Since version 8.5.0, we have introduced a new Countdown block for the Announcement Bar section which is perfect for creating urgency with flash sales, limited-time offers, and promotional campaigns.

---

1. Overview

The new Countdown Timer block allows you to create urgency and highlight promotions directly inside the Announcement Bar.

This feature can be used for:

• Flash sales
• Limited-time offers
• Product launches
• Holiday campaigns
• Shipping deadlines
• Event countdowns

The countdown can appear either above or below the announcement messages and automatically updates in real time.

---

2. How to Add a Countdown Timer

• Step 1 – Open the Theme Editor

  Go to:

  Online Store → Themes → Customize
  

---

• Step 2 – Open the Announcement Bar Section

  In the left sidebar, open:

  Header → Announcement Bar
  

---

• Step 3 – Add the Countdown Block

  Click:

  Add block → Countdown
  

  Note:

  Only one Countdown block can be added per Announcement Bar section.

---

3. Countdown Settings

• 3.1 Date

  Set the target date for the countdown.

  Example

  01-07-2026
  

  The timer will count down until this date is reached.

  Supported Date Formats

  The Countdown Timer supports the following formats:

  mm-dd-yyyy
  

  or

  yyyy-mm-ddThh:mm:ss
  

  Examples

  01-07-2026
  

  2026-01-07T23:59:59
  

  Important:

  Please make sure the date format is entered correctly. Invalid formats may prevent the countdown from displaying properly.

---

• 3.2 Text

  Add custom text displayed before the timer.

  Example

  🔥 Sale ends in:
  

  Tips

  • Keep the message short and clear
  • Use urgency-focused wording
  • Emojis can improve visibility

---

• 3.3 Expired Message

  This message appears when the countdown reaches zero.

  Example

  Sale has ended!
  

  Recommendation

  • Use a clear message to inform customers that the campaign has ended
  • Optionally redirect users to another promotion using the Link setting

---

• 3.4 Link

  Optional.

  You can add a link so customers can click the countdown bar and navigate to a collection, product, or promotion page.

  Common Use Cases

  • Sale collection
  • Promotional landing page
  • Featured product
  • Event page

---

• 3.5 Position

  Choose where the countdown appears.

  Top

  Displays the countdown above the announcement messages.

  Bottom

  Displays the countdown below the announcement messages.

  Recommendation

  • Use Top for important campaigns
  • Use Bottom for a cleaner layout

---

• 3.6 Display Style

  Choose how the timer is displayed.

  Full

  Shows labels for time units.

  Example

  02 Days : 10 Hours : 35 Minutes
  

  Compact

  Shows only the numbers for a cleaner and more minimal appearance.

  Recommendation

  • Use Full for promotional urgency
  • Use Compact for minimalist storefronts

---

• 3.7 Text Size

  Adjust the countdown text size to better match your store branding.

  Available Range

  • Minimum: 10px
  • Maximum: 18px

  Recommendation

  • Smaller sizes work better for minimalist stores
  • Larger sizes improve visibility during campaigns

---

• 3.8 Hide When Expired

  Controls what happens after the countdown ends.

  Enabled

  • The countdown bar automatically disappears after expiration

  Disabled

  • The expired message remains visible

  Recommendation

  Enable this setting for:

  • Flash sales
  • Limited-time campaigns
  • Temporary promotions

  Disable this setting for:

  • Event announcements
  • Evergreen promotions

---

4. Color Settings

• 4.1 Use Custom Colors

  Enable this option to apply custom colors specifically for the Countdown Timer.

  When disabled, the countdown inherits the Announcement Bar colors.

---

• 4.2 Countdown Background

  Choose the background color for the countdown section.

  Default

  #dc2626
  

  Recommendation

  Use high-contrast colors for better visibility.

---

• 4.3 Countdown Text Color

  Choose the text color for the countdown.

  Default

  #ffffff
  

  Recommendation

  Ensure strong contrast between text and background colors for accessibility.

---

5. Mobile Behavior

The Countdown Timer is fully responsive and optimized for mobile devices.

On mobile devices:

• Layout automatically adjusts for smaller screens
• Labels may be hidden in compact layouts
• Spacing is optimized for readability
• Elements wrap automatically when needed

---

6. Important Notes

• Only one Countdown block can be used per Announcement Bar section
• The countdown updates automatically in real time
• If no date is entered, the countdown will not display
• The countdown can work together with regular announcement messages
• The feature is available starting from Be Yours v8.5.0

---

7. Recommended Use Cases

• Flash Sale

  🔥 Flash Sale Ends In:
  

---

• Free Shipping Deadline

  🚚 Order within:
  

---

• Product Launch

  🚀 Launch starts in:
  

---

• Black Friday Promotion

  🖤 Black Friday Ends In:
  

---

8. Tips for Better Conversion

• Keep the message short and action-oriented
• Use contrasting colors for better visibility
• Combine the timer with a clickable sale link
• Use Compact mode for minimalist stores
• Use Full mode for stronger urgency communication
• Place the countdown at the top for high-priority campaigns

---

9. Summary

The Countdown Timer helps create urgency and improve customer engagement directly from the Announcement Bar.

With customizable styling, responsive behavior, and real-time updates, it provides a simple yet powerful way to highlight time-sensitive promotions in Be Yours v8.5.0.

---

Need Further Assistance

If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System.