Countdown

The Countdown Timer section is used to display a countdown clock, typically for promotions, product launches, or other significant events. This feature helps capture user attention and create a sense of urgency, encouraging users to take action promptly.

Feature Details

1. Content Settings

   • Enable Full Width (enable_full_width): By enabling this option, the countdown timer will span the full width of the page, making it suitable for display at the top or bottom of the page to ensure visibility for all users.

     • Default: Enabled

2. Color and Background

   • Color Scheme (color_scheme): Choose or edit the color scheme to define the text color, background color, and other visual elements of the countdown timer. Adjust according to your brand’s visual style.

     • Default: Inverse

   • Background Image (texture_image): Upload an image to use as a background texture for the countdown section.

   • Image Opacity (texture_alpha): Adjust the transparency of the background texture image, from 0% (fully transparent) to 100% (fully opaque).

     • Default: 90%

3. Text Content

   • Icon (icon): Select an icon to display next to the countdown text, adding a visual element to your message.

     • Default: Sale

   • Caption (subheading): Enter a short caption or subheading to appear above the main heading.

   • Heading (heading): Set a title for the countdown timer to briefly describe the upcoming event or promotional activity.

     • Default: Limited-Time Offer

   • Heading Size (heading_size): Choose the size of the main heading: Small, Medium, or Large.

     • Default: Medium

   • Decorative Heading (heading_decorative): Enable this option to apply a decorative font style to the heading.

     • Default: Disabled

   • Description (description): Add a detailed description or message below the heading.

4. Countdown Settings

   • End Time (end_time): Set the target date and time for the countdown, formatted as yyyy-mm-dd hh:mm. The countdown will stop once this end time is reached.

     • Default: 2024-12-31 15:23

   • Message After End (end_text): Enter a custom message to be displayed when the countdown ends, notifying users that the event has concluded or providing next steps.

     • Default: Timer complete message

   • Hide Countdown After End (hide_when_end): Enable this option to automatically hide the countdown timer once it has ended.

     • Default: Disabled

   • Timer Background Color (timer_background_color): Set the background color for the countdown timer digits.

     • Default: #FFFFFF

   • Timer Foreground Color (timer_foreground_color): Set the color for the countdown timer digits and labels.

     • Default: #103F2A

5. Button Settings

   • Button Label (button_label): Set the text for the button next to the countdown timer. This button typically guides users to view more details or take immediate action.

     • Default: View details

   • Button Link (button_link): Enter the link for the button, directing users to a specified page when clicked. You can provide a full URL or a relative path link.

6. Discount Code (discount_code): If the countdown is related to a promotional event, you can enter a discount code here. Users can use this code at checkout to receive a discount.

   • Default: NEWUSER

7. Section Spacing

   • Top Margin (margin_top): Adjust the spacing above the section.

     • Default: 0px

   • Bottom Margin (margin_bottom): Adjust the spacing below the section.

     • Default: 0px

Usage Suggestions

• Clear End Time: Ensure that the end time for the countdown is set accurately to avoid confusing users or missing out on promotional opportunities.

• Engaging Text Content: Use a clear and compelling heading, an optional caption, and a descriptive message to direct user attention to the upcoming event or offer. Consider adding a relevant icon and adjusting the heading size and style for visual impact.

• Visual Emphasis: Choose a color scheme that makes the countdown timer stand out on the page. Enhance the visual appeal by adding a background image and adjusting its opacity, and customize the timer's background and foreground colors to align with your brand.

• Timely Updates: Update the countdown settings based on the actual timing of events to ensure users receive accurate information.