Navigation

Getting Started

How-To Help Videos

Admin Settings

Business Hub

Customize Your Store

Customer Account Area

FAQs & Troubleshooting

Other Resources

  1. DecoNetwork Help
  2. Website Editor
  3. Adding and Configuring Widgets

How to Add and Customize a Countdown Timer on Your DecoNetwork Website

Avatar
Lee Prazner
Updated

Add urgency and drive conversions on your website by displaying a live countdown clock for key events such as store openings, closing dates, promotions, or product launches. The Countdown Widget in DecoNetwork makes it easy to visually communicate time-sensitive actions to your customers.

Countdown_Clock.gif

Example of a countdown clock display

The countdown clock will show the days, hours, minutes, and seconds left until the Countdown date.

In This Article

Prerequisites

  • You must have access to the Website Editor
  • Your store must be set up and editable

Why Use a Countdown Clock?

The Countdown Widget helps create urgency and clearly communicate important deadlines to your customers.

  • Drive conversions: Encourage faster purchasing decisions with time-limited offers
  • Highlight key events: Promote store launches, campaign deadlines, or sales
  • Automate timing: Sync with store open/close dates for hands-free updates
  • Improve clarity: Clearly display how much time remains for an offer or event

How to Add a Countdown Widget

Step 1: Open the Website Editor

  1. Log into your DecoNetwork website
  2. Navigate to Admin → Websites
  3. Click Manage on your store
  4. Go to Edit Website → Website Pages

Step 2: Add the Countdown Widget

  1. Click the WIDGETS button in the Website Editor Toolbar.

  2. Scroll to the ADVANCED section and locate the Countdown Widget.

    Countdown_Widget_Button.png

  3. Drag and drop the Countdown Widget onto your page.

    Allowable areas the Countdown Widget can be inserted into include:

    • Within rows
    • Within columns
    • Above or below existing widgets

    The Countdown Settings popup will be displayed with the Settings tab selected.

    Countdown_Settings.png

Step 3: Configure Countdown Settings

  1. Enter a Panel title (optional).
  2. Select a Countdown Type:

    • Custom: Set a specific date for the countdown clock.

      Click on the calendar icon to select the date you want to count down to.
    • Open Store: Uses the Store Open Date as the countdown date, if set.

    • Close Store: Uses the Store Close Date as the countdown date, if set.

      (Set the Store Close Date via website store-level settings > Store Configuration > Close Store Options. When a Store Close Date is set, it will be used as the default countdown date).
  3. Click OK to apply the changes.

Step 4: Save and Publish

  1. Click Save.
  2. Click Publish at the right of the Page Settings Bar to make the countdown live.

Customize Countdown Design

Step 1: Open Design Settings

  1. Hover over the Countdown Widget.

    The widget's controls will be displayed.

  2. Click on the dropdown arrow beside the Countdown Widget icon.

  3. Choose the Countdown Settings item from the drop-down menu.

    Countdown_Settings_Menu_Item.gif

    The Countdown settings popup will be displayed.

  4. Click on the Design tab.

    Countdown_Settings__Design_Tab_.png

Step 2: Choose Layout

  1. Choose a Countdown Layout:

    • Flat

      Countdown_Clock_-_Flat_Layout.png

    • Flip

      Countdown_Clock_-_Flip_Layout.png

Step 3: Customize Appearance

  • Panel Title: configure the font style and color of the panel title.
    • Click on the font name to configure the font style using the Font popup. Click here for instructions.
    • Click on the color spot to choose a text color using the Color popup. Click here for instructions.
  • Numbers: configure the font style and color of the countdown numbers.
    • Click on the font name to configure the link font style using the Font popup. Click here for instructions.
    • Click on the color spot to choose a text color for the link using the Color popup. Click here for instructions.

  • Caption: configure the font style and color of the countdown caption.

    Caption.png
    • Click on the font name to configure the link font style using the Font popup. Click here for instructions.
    • Click on the color spot to choose a text color for the link using the Color popup. Click here for instructions.

  • Blocks: configure the settings of the countdown unit blocks.

    Click on the brush icon to access the settings. The settings will differ depending on the layout chosen:

    Flat Layout Settings

    Flat_Layout_Blocks_Settings.png
    • Background Color: lets you specify the background color of each unit block.
    • Border Width: lets you specify the border width of each unit block.
    • Border Color: lets you specify the border color of each unit block
    • Width: lets you specify the width of each unit block.

    • Margin: lets you specify the margin settings for each unit block. Click on the brush icon to access the margin settings.

      Margin_Popup.png

    • Padding: lets you specify the padding settings for each unit block. Click on the brush icon to access the padding settings.

      Padding_Popup.png

    Flip Layout Settings

    Flip_Layout_Blocks_Settings.png
    • Width: lets you specify the width of each unit block.
    • Height: lets you specify the height of each unit block.

    • Margin: lets you specify the margin settings for each unit block. Click on the brush icon to access the margin settings.

      Margin_Popup.png

  • Panels: configure the appearance of the countdown digit panels.

    Click on the brush icon to access the settings.

    Panels_Settings.png
    • Background Color: lets you specify the background fill color of each digit panel.
    • Border Width: lets you specify the border width of each digit panel.
    • Border Color: lets you specify the border color of each digit panel.
    • Border Radius: lets you specify the border radius of each digit panel.

    The following images illustrate the blocks and panels areas for each of the Countdown Layouts.

    Flat Layout

    Countdown_Clock_Flat_Layout.png

    Flip Layout

    Countdown_Clock_Flip_Layout.png

Tip: Match your countdown colors with your website theme to maintain a consistent brand experience.

Step 4: Save and Publish

  1. Click OK, once you have finished configuring the settings.
  2. Click Save to commit the changes.
  3. Click Publish at the right of the Page Settings Bar to make the changes live.

Best-Practice Tips

  • Use for urgency: Apply countdowns to limited-time offers or campaigns
  • Keep it visible: Place the widget above the fold for maximum impact
  • Avoid clutter: Use one primary countdown per page
  • Align with messaging: Pair with clear CTAs like “Order Now” or “Sale Ends Soon”

Troubleshooting

The countdown is not showing the correct date

  • Check the selected Countdown Type
  • Verify the correct date is selected in settings
  • If using store close dates, confirm they are configured under Store Configuration → Close Store Options

The widget is not visible on the live site

  • Ensure you clicked Publish after saving
  • Confirm the widget is placed in a visible section of the page

Design changes are not applying

  • Click OK after editing design settings
  • Save and publish the page again

FAQs

What does the countdown display?

The countdown shows the remaining days, hours, minutes, and seconds until the selected date.

Can I link the countdown to store opening or closing?

Yes. You can select Open Store or Close Store as the countdown type to automatically sync with store settings.

Where can I place the widget?

You can place the Countdown Widget within rows, columns, or above/below other widgets on your page.

Additional Resources

Still have questions? Use the Search Tool at the top of the page to find more related guides. Need help? Click the icon to submit a support ticket—our Client Services team is ready to assist!

Related articles

Comments

0 comments

Please sign in to leave a comment.