Shopify Countdown Timer Bar

Table of Contents

From Settings, you can customize the look and feel of the countdown timer bar and set timings according to your needs.

In order to configure the app, we first need to enable the app from the theme embed in the Dashboard.

Countdown Timer Preview: From the preview section, you can see the preview of the countdown notification bar after applying any changes to the configuration.
Simple Templates: Choose the most appropriate template design from the ready-made simple templates for the timer bar.
Graphical Templates: Choose the eye catchy graphical design for the countdown timer bat from the predefined Graphical templates.

All the general settings for the app can be configured from the “Content Configuration” section.
Countdown Timer Functionality: Enable the countdown timer notification bar from here
Text Before Timer: Add the text that you want to show before the countdown timer.
Text After Timer: Add the text here that you want to show after the countdown timer.
Display a Close button: Select Yes if you want to allow the user to close the countdown timer bar.
User Interaction: Select a bar behavior option for when the user clicks on it.
- Add an action button: If you want to redirect your user to a specific page when they click a button, select this option.
- Entire bar clickable: Select this option to redirect customers to a specific page on the entire bar click.
- None: Select "None" to display only the countdown timer bar in the front end.
Button Text: Enter the text that you would like to appear on the button in the front.
Landing Page URL: Add the URL of the page where you want your user to redirect on the click of a button or bar.
Set Countdown Timer Bar Position: Select the position where you want to show the countdown timer bar in the front end.

The timing to display the countdown timer bar can be configured from the “Countdown Timer Settings” section.
Choose Time Zone: Select the time zone that you would like the timer to display according to your country.
End the Campaign on: Add the display of the counter bar's end time.

The look and feel can be customized from the “Customize Countdown Timer Bar section”. Add the design of the bar according to your website layout.

Background Color: Select a background color from the color picker to set it as the background color of a bar.
Button Color: Choose an eye catchy color from the various color options for the action button.
Timer Color: Set the background color of the timer digit from here.
Text Color: Change the text of the countdown notification bar from here.
Button Text Color: Change the button text of the bar from here.
Timer Digit Color: Change the timer color of the bar from here
Background Type: Choose the most appropriate background type based on your requirement
- Solid Color: It allows various color options to be set in the background of the bar.

- Color Gradient: You can set a gradient background from this option and also create your own shades of gradient by using the Gradient Color 1 and 2 options.

- Image Pattern: Set the predefined patterned image if it suits with your website.

- Fit Image: Set the predefined image as a background of a countdown notification bar.
- Upload Background Image: If you want to add the image from your device then click on “Choose File” button and add the appropriate image.

Button Animation: You can add animation to your button arrival from several given options.
Fonts: Select the most appropriate fonts for your notification bar.
- Default & Web Safe Fonts: Select browser-supported fonts from here.
- Google Fonts: Select Google Fonts if you want other than the browser-supported font.
Set Font Size: Set the font size for the notification bar from here.
Set Padding: Add space between the text and the border of the bar from here.
Display Timer Labels: Select this checkbox if you want to show timer labels as Days, Hours, months and seconds.

Page Targeting:
- Include on page or product: Select the page where you want to show the countdown timer notification bar.
- Device Targeting: Select the device where you want to show the bar.

After the app is configured and the countdown notification bar is enabled, it is shown in the frontend as shown.