Kickoff Countdown
Niels van Vlerken avatar
Written by Niels van Vlerken
Updated over a week ago
mceclip0.png

Kick it off! Prepare your customers for your biggest sale ever! πŸ›οΈ

With the Kickoff countdown you make it clear to your customers at a glance that you will soon have a (large) offer. Customers will no longer wonder when there is a sale , does this shop have a black friday ? Does this shop have a Sinterklaas/Christmas promotion? You decide, you win.

Installation πŸ› οΈ
​

mceclip0.png


To install this add-on, an implementation from a developer is required . So it may take a while before the add-on is active. Simply click on " Request add-on " and let Plus+ notify our development heroes. πŸ‘¨β€βš•οΈ
​
After clicking " Request Add-on ", you would be redirected to " My Plus+ Add-ons " page. You will also see the following message appear in the top right corner of the dashboard.
​

mceclip3.png


​
​Add-on settings/overview βš™οΈ
​

mceclip0.png


After installation you will see that the add-on is in your overview , including installation date and status.
​
With this add-on, the status would first be "Pending" , this is because the developers would first have to add the code to your webshop. As soon as the developers are working on this you should see the status change to "Pending".
​

mceclip10.png


If the developers have added the code, this status will be set to "inactive" , so you can set it up properly and then activate it! βœ…
​

mceclip11.png


To activate the add-on, click on the hamburger menu and choose "activate". Prefer to see a preview in test mode first ? Which can. Click " Activate in preview mode" and the add-on would be visible only to you. So not for the customers !
​

mceclip5.png

Settings βš™οΈ

Of course we have to set the Kickoff countdown , so that the customers know exactly when your beautiful sale starts. Of course we have the settings in the dashboard for that. Click on " Show settings " to open the settings.

mceclip2.png


β€‹πŸ›οΈ Banner background color: Set the background color for your banner here, do you prefer to use an image? Then of course you don't have to set this.
β€‹πŸ›οΈ Text color: This goes without saying , the text color for the texts and numbers!
β€‹πŸ›οΈ Background color countdown: A block is displayed behind the numbers, which color can it have?
​
​

mceclip3.png


β€‹πŸ›οΈ Desktop background image (optional): Want to use an image in your countdown? Set it up here. Recommended size: 1248px wide, 250px high .
β€‹πŸ›οΈ Background image for mobile (optional): Want to use a separate image for mobile? Then you can upload it here.Recommended size: 640px wide, 300px high .
β€‹πŸ›οΈ Overlay banner color: Is the text white with a white background? That of course makes it less readable. Set a color here for any overlay, so that the texts are more visible.

mceclip4.png

πŸ›οΈ Overlay transparency: Do you use the overlay? Then you can set the transparency here. 0% is not visible, so completely transparent. 100% is completely visible, so not transparent.
β€‹πŸ›οΈ White space under the banner: The banner is displayed on the homepage, do you want some white space under the countdown banner? This setting ensures that no other elements on your webshop are touched.
β€‹πŸ›οΈ White space above the banner: The banner is displayed on the homepage, do you want some white space above the countdown banner? This setting ensures that no other elements on your webshop are touched.

mceclip5.png


β€‹πŸ›οΈ Show button: Do you want to show a button at the countdown? For example, to link to a specific page where you have your sale? Then you can check this. You can set the URL of the button through custom translations. Use the translation key 'dmws-kickoffcountdown-button-url' for this. With the translation, enter the URL of the desired page. (For an explanation about translations click here )
β€‹πŸ›οΈ Button background colour: What background color can the button have? Choose it here!
β€‹πŸ›οΈ Button text color: Which text color can the button have? Set it up here.

mceclip6.png


β€‹πŸ›οΈ Start time: When can the countdown start counting? The timer will not be displayed for this time. Handy if your timer starts from 00:00, you don't have to do this manually!
β€‹πŸ›οΈ End time: When do you want the timer to end? You can set that here.
β€‹πŸ›οΈ Hide banner when timer is up: Want to hide banner when timer is up? Then enable this option. The banner continues to be displayed differently with all numbers at 0.
​
Setting the time is very easy via a "calendar" , here you can select the date and time. This applies to the start time and end time .
​

mceclip8.png

Within this add-on word using translation keys, this allows you the text of the customization add-on to your own text. You can do this with custom translations .
The translation keys for this are as follows:

  • The sale is about to start

  • Order our collection with high discounts!

  • View collection

  • The sale has started

  • Be quick and take advantage of high discounts!

  • shop now

  • dmws-kickoffcountdown-button-url

  • days

  • hours

  • minutes

  • seconds
    ​

More information about translations can be found HERE .

Result 🏁
Of course you are curious about the result , hereby the result of your Kickoff Countdown!
​

mceclip9.png
Did this answer your question?