Countdown timer
Add the section to promote sales using a Countdown timer combined with descriptive strings and link redirection to the preferred collection. Diversify your content with related images.
Heading
Use the "Heading" field to title the section. Start typing text in the field to view the additional settings:
The title size can be changed in the "Size" drop-down to "Small", "Medium", or "Large".
If you need to change a title color, use the "Color" picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be used for both desktop and mobile.
Description
Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading. Color settings will be shown after entering text.
The color of the description can be set in the "Color" picker. The color you apply to the item will be used for both desktop and mobile.
Content
Display the counter text by activating the "Show time units" option in Theme settings -> Time countdown -> Product page and Popup.
The expiration date and time of the Time countdown can be specified in the "End date and time" field.
By default, the section contains the expiration date for the timer to simplify setup. Replace the default settings with yours using the format dd/mm/yyyy hh:mm:ss. Example: 30/05/2024 23:00:00.
First image/Second image
Place the images on both sides of the Countdown timer using the "First image" and "Second image" pickers. Press "Select" to upload the necessary images for both desktop and mobile.
On the desktop view, the content specified in the "First image" selector will be displayed on the left by default. The "Second image" is set to showcase on the right. Images will be displayed as two items in a row above the timer on mobile.
Choose the appropriate image aspect ratio in the "Image ratio" drop-down. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check each image ratio here
Button
Use the settings described below to add or edit the button that will appear under the countdown itself:
Change the internal button text in the "Label" field. Leave the field blank to hide the button.
To redirect customers to the desired page, edit the "Link". Use the link from the source selector, or paste the one if you use an external link.
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can fit your store design: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.
Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.
Section layout
To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden when you select the "None" option.
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Animations
Hover animation
If you want to add an animation inside the image container, choose the suggested option from the list. By default, the block uses the "Inherit global settings" option. If there is no need to apply animation settings for the block individually, leave this option as it is. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "Banner image" desktop hover animation drop-down. Read the details on the following help page.
The "Zoom in" and "Zoom out" options create a zoom effect when the mouse hovers over, either enlarging or decreasing the image. The option "None" deactivates the animation.
You can read more about the described options on the following help page.
Colors
Set the base color of the countdown banner using the "Background" picker.
The 'Border' color picker changes the outer border color of the countdown banner.
The counter base color can be modified in the "Counter background" color picker.
Colorize the text using the "Counter text" item.
Here is the example view of the section on a desktop and mobile:
Last updated