Countdown Timer
Updated 1 month agoIt displays a live timer counting down to a specific offer or event. You can use it for flash sales, limited-time discounts, or product launches.
Action
Select the target page where the button will redirect users. You can link it to a collection or a product.
Image
Upload the image you want to display alongside the countdown.
Image Attributes
-
Ratio - Choose the display ratio for the image.
-
Radius - Set how rounded the corners should be.
-
Image Scale - Choose whether the image fills the frame or fits inside it.
Text Content
Enable or disable the text content by clicking the eye button.
Heading
You can enable or disable the heading using the eye button.
If enabled, you can adjust:
-
Text - Enter the heading you want to show.
-
Font - Select the font style that matches your layout.
-
Size/Weight - Control the size and boldness.
-
Line Height - Adjust spacing between lines.
-
Letter Spacing - Manage spacing between characters.
-
Text Color - Choose the heading color.
-
Alignment - Position the heading.
-
Capitalization - Choose uppercase, lowercase, or sentence case.
The same options apply to Subheading as well.
Countdown
Timer Text
-
Font - Choose a font for the countdown numbers.
-
Size/Weight - Set the size and weight.
-
Line Height - Adjust vertical spacing.
-
Letter Spacing - Modify spacing between characters.
-
Text Color - Choose the color of the timer text.
-
Alignment - Position the countdown text.
Subheading
-
Font - Choose the font style.
-
Size/Weight - Adjust size and thickness.
-
Line Height - Set spacing.
-
Letter Spacing - Control character spacing.
-
Text Color - Choose the subheading color.
-
Alignment - Position the subheading.
-
Capitalization - Select your preferred text style.
Countdown Timer
-
Timezone - Choose the timezone the countdown will follow.
-
End Time - Set the exact time when the countdown should end.
Button
Enable or disable the button using the eye button.
If enabled, you can customize:
Button Text
-
Text - Add the button label.
-
Font - Select the font style.
-
Size/Weight - Adjust size and boldness.
-
Line Height - Control spacing.
-
Letter Spacing - Modify spacing between letters.
-
Text Color - Choose the button text color.
-
Alignment - Position the text inside the button.
-
Capitalization - Choose text casing.
Border
Set the border color and width.
Left Icon - Choose or upload an icon and set its color.
Right Icon - Choose or upload an icon and set its color.
Advanced Settings
-
Background Color - Choose the background color.
-
Radius - Adjust corner roundness.
-
Padding - Control inner spacing.
-
Relation - Set how elements are arranged, either side by side or spaced apart.
-
Format - Choose the layout format.
-
Position - Decide where the countdown block will appear within the section.
Layout Padding
Color - Choose the background color for the layout area.
Radius - Adjust the corner roundness.
Padding - Set inner spacing.
Background and Spacing
Color - Choose a background color for the entire block.
Radius - Adjust how rounded the corners appear.
Padding - Control the inner spacing.
Margin - Set spacing around the outside of the block.
Border
Color - Select the border color.
Width - Set thickness.
Sides - Choose which sides have a border.
Benefits:
-
Creates urgency and FOMO
-
Encourages faster purchase decisions
-
Increases conversion rates during campaigns
Related Articles
