Countdown | SHOP Builder – SHOPLINE Help Center

4. EC + SC (EN).png

When adding or editing advanced pages through SHOP Builder, you can add a Countdown widget as an Announcement Bar or in the content to remind customers that the store campaign is about to start or end soon. You can also design buttons and insert hyperlinks to the event to offer online store visitors a sense of expectation.

⚠️ Before you begin:

SHOP Builder currently only supports Ultra Chic, Kingsman, Varm, and Philia theme templates.
After creating a page using SHOP Builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.

In this article, you'll learn how to

Add Countdown Widget
Notes

1. Add Countdown Widget

Step 1

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click Advanced Page/Edit to open up the Advanced Page settings page.

Step 2

1. Add Countdown widget as announcement bar

Click on the Announcement Bar button.

Click Countdown to add a Countdown widget.

2. Add Countdown widget in the content

Click the Widget button.

Click Countdown under the "Extension" widgets.

Step 3

The content and settings of the countdown can be edited in the column on the left. Go to the "Period" section to set the start and end times of the event. Click Save at the bottom column to show the widget in the preview area on the right.

*Notes:

If you have not set an event period, the Countdown widget will not appear on the preview screen on the right.
The Varm theme template offers a different Countdown widget design.

Step 4

Expand the "Start Countdown" section to set up the title, content and button of the countdown before the event.

Title: Enter the title of the upcoming event
Content: Enter the description of the upcoming event
Show Button: On/Off toggle to show or hide buttons
Button Text: Set the text content of the button
Link To: You can paste the event URL. Customers will be directed to this URL when they click on the event button
Open Link In: You can select to open the event URL in the current window or a new window

Step 5

Expand the "End Countdown" section to set up the title, content and button of the countdown during the event.

Title: Enter the title of the ongoing event
Content: Enter the description of the ongoing event
Show Button: On/Off toggle to show or hide buttons
Button Text: Set the text content of the button
Link To: You can paste the event URL. Customers will be directed to this URL when they click on the event button
Open Link In: You can select to open the event URL in the current window or a new window

Step 6

Set the widget padding and text alignment (Left/Center/Right).

Step 7

Adjust the color settings of the widget. Switch on/off the toggle to set whether to customize the widget's color.

If you switch on the toggle, you can customize the colors of these parts: Background, Text, Text Link, Button Background, and Button Text.

Step 8

During the setup process, you can click the Save button below to view the newly added Countdown widget in the preview area on the right.
*Note: You can preview the page in the desktop version or the mobile version.

Or click Preview Page to preview the storefront.

Step 9

After confirming the setup above, please click the Publish button at the top right so that customers can view all the new page content at the storefront.

2. Notes

The event time will be displayed as GMT+N.
No matter which time zone you are in, the countdown time in the widget is in the timezone of your online store.
The event time is absolute. No matter which time zone the customer is in, the remaining time of the event countdown is the time of your online store - the end time.
For example, your online store time zone is GMT+8, and the event end time is 25 December 12:00 (GMT+8).
- Customer A is in the GMT+8 time zone (the same time zone as your online store), and at 09:00(GMT+8) on 25 December, the countdown time left for the event seen by A is 12 - 9 = 3 hours.
- Customer B is in the GMT +9 time zone (1 hour ahead of your online store). At 10:00(GMT+9) on 25 December (equivalent to 09:00 (GMT+8)), the campaign countdown time seen by B is still 12 - 9 = 3 hours.

Countdown | SHOP Builder