Countdown will help you create a sense of urgency or scarcity toward your customer, thus, when placed on a product page, this element will make a sharp spike in conversion rate. This article will introduce you to the main settings of the Countdown element, so you can create a countdown until the end of a campaigns with ease.

In this section

A. Content
B. Design

A. Content

1. General

Title: You can input the title of your CountDown here.

Type: Metafields, Custom, Custom and Metafield are the 3 types to choose from.
- Metafields type: This type will fetch the timing data from metafields of products from Shopify to display. When you install Beae app, two metafields (Beae Product countdown from and Beae Product countdown to) will be automatically generated for products in Shopify.
- If you want to select this type, please select Shopify Admin > Product > All products > Select a certain product that you want to display metafields content > Add countdown on Beae product countdown to and Beae product countdown from field. You can check the image below for more details.

For example: When you add the Beae product countdown from January 8, 2022 to January 20, 2022. It'll countdown 12 days is 1 week 4 days. See the image below for more details.

- Custom type: This type allows you to enter the date and time manually into the app to display in the countdown timer. You can set the start and end time here.

- Metafield and custom type: If you choose this type, it will prioritize showing countdown from metafields of products. It means if you set metafields for products in Shopify, they will be prioritized to display. Otherwise, the values you added to start and end fields will be displayed.

The countdown timer will be the same on all products if you create a template and set it as default template for all products. So if you want to have the same template to all product and have different countdown to each one, you should choose the "**Metafield**" type and set the metafields in Shopify's dashboard.

Layout: You can choose from 2 layouts: horizontal or vertical.

Show when on Sale: If you check this option, countdown will only show on products that are on sale (products with compare at price higher than selling price). If you uncheck the option, the countdown will be displayed on all products.
Show progress bar: This option enables a progress bar under the countdown timer. The progress bar component helps customers visualize how much the period of time has left.

Show week, day, hour, minute, second: Simply check options to control the components you want to be presented on the countdown.

2. Change text

Here you can change the text to show on the countdown. Just following the structure that we recommended.

You can check this article on countdown to learn more about the countdown configurations.

B. Design

1. Title

Alignment: Control the placement of the countdown title (left, center or right), responsive mode is available for all devices.
Typography: Change typography for countdown title.
Text Color: Pick a color for the title.
Text Shadow: Enable you to add shadow to text. Choose a color > Adjust the position of Shadow using Horizontal and Vertical attributes.
Spacing: Adjust margin and padding for the title.

2. Items

Width and Height: Adjust width and height for the items.
Alignment: Control the placement of the content (left, center or right), responsive mode is available for all devices.
Background: Set background color or image for countdown.
Box Shadow: Adjust the content's shadow by changing the Color, Horizontal, Vertical, Blur, Spread, Position, responsive mode is available for all devices.
Border: You can setup the border for countdown.

3. Number

You can format and style the number on this section

4. Label

You can format and style the label of the countdown here.

5. Progress bar

Width and Height: Adjust the width and height of the progress bar.
Background: Change the background color of the progress bar. On the Normal tab, you may see the remaining time of the countdown. And on the Active tab, you can see the elapsed time of the countdown. Besides, you can use gradient background color for the progress bar. Gradients are CSS elements of the image data type that show a transition between two or more tones. These transitions are shown as either linear or radial.
Border Radius: Set the border radius to control corner roundness. It allows you to set different border radius for each devices.

Note: You may check Element fields for more details about the Design tab.
Was this article helpful?
Thank you!