Features Breakdown: Countdown Banner (Smart) This section is a high-urgency hero banner featuring a live countdown timer. It allows for complete visual customization, from background images to timer styling, and includes smart logic for when the countdown expires.

1. Countdown Timer Logic

• End Date & Time: Input the specific expiration moment (YYYY-MM-DD and HH:MM).

• Expiry Behavior: Choose what happens when the timer hits zero:

  • Hide Section: The entire banner disappears automatically.

  • Show Message: The timer is replaced by a custom "End Message" (e.g., "Offer Expired").

• Labels: Customizable text labels for "Days," "Hours," "Minutes," and "Seconds."

2. Background & Media

• Device Specifics: Upload a separate Desktop Image (e.g., wide) and Mobile Image (e.g., tall/square) to ensure perfect framing.

• Cross-Device Fallback: If you only upload one image, the code automatically uses it for both devices.

• Overlay: Add a colored layer over the image with adjustable Opacity % to ensure text readability.

3. Dimensions & Sizing

• Aspect Ratio Modes:

  • Adapt: Height adjusts to the natural size of the image.

  • Fullscreen: Forces the banner to cover 100% of the viewport height.

  • Fixed Ratios: Choose from presets like 16:9, 21:9, Square, etc.

  • Fixed Height: Set a specific pixel height (e.g., 600px) overriding ratios.

• Side Padding: Toggle between Theme Standard margins or Custom Padding (px).

4. Timer Styling

• Box Design: Customize the background color, border color, opacity, and corner radius of the individual time blocks.

• Typography: Independent font size sliders for the Digits (Numbers) and Labels (Text) for both Mobile and Desktop.

5. Layout & Typography

• Alignment: Control both Horizontal (Left/Center/Right) and Vertical (Top/Middle/Bottom) alignment of the content block.

• Text Hierarchy: Dedicated fields for a Heading, Subheading, and a Call-to-Action Button.

• Font Source: Use the global Theme Font or force specific Custom Fonts for Headings and Body text.

6. Visibility

• Device Targeting: Checkboxes to hide the section on Mobile Only or Desktop Only.